I have the following code written in Razor view in MVC in C#. I want to select one of the item based on value but it is not working. I confirmed that the variable Facilities contain value Un-Funded but it doesn't select this item.
<select id="facilities" class="form-control" style="width:200px;">
<option #{ if (Facilities == "Funded") { Response.Write(" selected "); } }>Funded</option>
<option #{ if (Facilities == "Un-Funded") { Response.Write(" selected "); } }>Un-Funded</option>
</select>
Here's screenshot of how HTML looks like. Notice it is not printing selected for any of the option.
I am using Response.Write which doesn't work in Razor view. Using #Html.Raw("some string") fixed the issue. So the code will look like this:
#{ if(Facilities == "Funded") { #Html.Raw("selected='selected'") } }
You can try to use js,so that if you have many options,you don't need to check on each option:
<select id="facilities" class="form-control" style="width:200px;">
<option value="Funded">Funded</option>
<option value="Un-Funded">Un-Funded</option>
</select>
<script>
$(function () {
$("#facilities").val("#Facilities");
//Or you can use $("#facilities").val(#Html.Raw(Json.Encode(Facilities)));
})
</script>
With MVC 5 you can use this method #: to insert your selected:
<select id="facilities" class="form-control" style="width:200px;">
<option value="Funded" #{ if (Facilities == "Funded") { #: selected="selected"
}}>
Funded
</option>
<option value="Un-Funded" #{ if (Facilities == "Un-Funded") { #: selected="selected"
}}>
Un-Funded
</option>
</select>
for older version you can check this link :
setting-the-selected-option-in-mvc3
Related
This is the HTML code
<option value="0" name="cv">Choose View</option>
<option value="1"name="profile">Profile</option>
<option value="2"name="privateserver">Private Server</option>
<option value="3">Group</option>
and this is the PHP code
create.php:
if (isset($_POST['submit'])) {
if (isset($_POST['profile'])) {
echo "profile";
}
}
I don't know what to do please help.
First of all, we need a form.
So Here we add a form.
Html code
<form name="choose">
<option value="0" name="cv">ChooseView</option>
<option value="1"name="profile">Profile</option>
<option value="2"name="privateserver">Private Server</option>
<option value="3">Group</option>
<button type="submit">Done</button>
</form>
Php code
$chosen = $_POST['choose'];
case $chosen{
case '1':
//1 is the value of option
//so if profile been chosen
//and do something
break;
case '2':
//do again
//and again the 1,2,3,4 is the value of chosen option in HTML form
break;
}
I have an HTML.DropDownList where I can set datavaluefield and datatextfield like the following,
<select>
<option value="Fruit">APPLE</option>
</select>
Even, I can able to set the ID to dropdown list using html attributes but Since I need to set the 'Id' to the option like following,
<select>
<option ID='1' value="Fruit">APPLE</option>
</select>
Can anyone share the idea on it...
You can use the id attribute to set the ID to the option tag and use this.value into the onchange callback with select element.
Below is the working example
document.getElementById("select1").onchange = function() {
if (this.value == 'Fruit') {
var optionID=document.getElementById('1');
alert(optionID.value);
}
if (this.value == 'Flower') {
var optionID=document.getElementById('2');
alert(optionID.value);
}
}
<select name="select01" id="select1" onchange="handleSelect()">
<option value="Fruit" id="1">Apple</option>
<option value="Flower" id="2">Rose</option>
</select>
Try this, It will alert your selected value
<select onchange="alert(this.value)">
<option id="1">APPLE</option>
<option id="2">Orange</option>
</select>
I created one View Model with two Entities. I am passing this view model to my MVC Razor view which have two html drop-downs for each entity respectively.
<select class="form-control" id="Employees" name="Employees">
#foreach (var employee in Model.Employees)
{
<option value="#employee.Id"> #employee.name </option>
}
</select>
<select class="form-control" id="Tasks" name="Tasks">
#foreach (var task in Model.Tasks)
{
<option value="#task.Id"> #task.name </option>
}
</select>
Employee table is the parent of Task table. What I want is getting all the tasks which are related to particular employee only. e.g. In Employee drop-down I select John, then in Tasks drop-down I should get all the tasks which are relative to John. I know how to do this with ajax. I am looking for some other solution.
Is it possible to do something like this:
#foreach (var task in Model.Tasks.Where(x=>x.employeeId == 'Selected in previous dropdown'))
{
<option value="#task.Id"> #task.name </option>
}
Html block
<select id="Employees">
<option value="">Select Employee</option>
<option value="1">Employee1</option>
<option value="2">Employee2</option>
</select>
<select id="Tasks">
<option value="">Select Task</option>
<option value="1" data-employee="1">Employee1Task1</option>
<option value="2" data-employee="1">Employee1Task2</option>
<option value="3" data-employee="1">Employee1Task3</option>
<option value="1" data-employee="2">Employee2Task1</option>
<option value="2" data-employee="2">Employee2Task2</option>
<option value="3" data-employee="2">Employee2Task3</option>
</select>
Script scetion
<script>
$(document).ready(function () {
//on page ready hide all task option
$("#Tasks").find('option').hide();
// set task as empty
$("#Tasks").val('');
// onchange of employee Drop down
$("#Employees").on('change', function () {
var selectedEmployee = $("#Employees").val();
if (selectedEmployee != '') {
$("#Tasks").find('option').hide();
$("#Tasks option[value='']").show();
$('*[data-employee="' + selectedEmployee + '"]').show();
}
else {
// if employee not selected then hide all tasks
$("#Tasks").find('option').hide();
$("#Tasks").val('');
}
});
});
</script>
Please populate country and state drop down list using MVC way by for each loop and use above script. The mandatory case is you have to render all cascade options
<select class="form-control" id="Employees" name="Employees">
#foreach (var employee in Model.Employees)
{
<option value="#employee.Id"> #employee.name </option>
}
</select>
<select class="form-control" id="Tasks" name="Tasks">
#foreach (var task in Model.Tasks)
{
<option value="#task.Id" data-employee="#task.EmployeeId"> #task.name </option>
}
</select>
I want to show items with indention in html.dropdownlist
this is code in controller
IEnumerable<ViewModels.testvm> test = db.Database.SqlQuery<ViewModels.testvm>(#"WITH tree (id, parentid, level, title, rn) as
(
some code
)
***********SELECT id,REPLICATE(' ',level) + title as title
FROM tree
order by RN");
ViewBag.ParentID = new SelectList(test, "ID", "Title");
as you can see I add   to dropdown items in replecate
but the problem is   shows in dropdown.
this is view > source result:
<select class="form-control" id="ParentID" name="ParentID"><option
value="10">Menu1</option>
<option value="11"> Sub1</option>
<option value="14"> Submenu1</option>
<option value="12">Menu2</option>
<option value="16"> sub2</option>
<option value="13">Menu3</option>
<option value="15"> sub3</option>
<option value="17"> sub sub</option>
<option value="22"> sub3 sub sub</option>
<option value="19">menu4</option>
<option value="20"> sub4</option>
<option value="21">menu5</option>
</select>
as you can see converted to
I tried "\xA0" instead of   but it shows in dropdown too!
I think html.raw can solve this, but I don't know how can I use it with html.dropdownlist.
this is view
<div class="col-md-10">
#Html.DropDownList( "ParentID", null, htmlAttributes: new { #class = "form-
control" })
</div>
any Idea?
Edit
by changing view like this the problem solved:
I tried this after checked a post as answer
<select class="form-control" id="ParentID" name="ParentID">
<option value="0">First Level</option>
#foreach (var item in ViewBag.ParentID)
{
<option value="#item.Value">#Html.Raw(#item.Text)</option>
}
</select>
You can manually create the dropdown list assuming you place your collection in a ViewModel member called ParentIDs:
The View:
#if (Model.ParentIDs.Any())
{
<select class="form-control" id="ParentID" name="ParentID">
#foreach (var item in Model.ParentIDs)
{
if (Model.ParentID == item.id)
{
<option value="#item.id" selected>#item.title</option>
}
else
{
<option value="#item.id">#item.title</option>
}
}
</select>
}
I have a select box which contains the options and optgroup that are generated dynamically using php.Now when I select "ALL" all the other optgroup, options should be disabled and when I select any option other than "ALL" the "ALL" option should be disabled
<select name="select1" id ="select1" onchange="handleSelect()">
<option value ="-1">ALL</option>
<optgroup label="CARS">
<option value="ford">FORD</option>
<option value="Nissan">Nissan</option>
</optgroup>
</select>
<script>
function handleSelect() {
var selectVal = $("#select1:selected").text();
if (selectVal == "ALL") {
// cannot disable all the options in select box
$("#select1 option").attr("disabled", "disabled");
}
else {
$("#select1 option[value='-1']").attr('disabled', 'disabled');
$("#select1 option").attr('disabled', '');
}
}
</script>
How can I make this working?
This is kind of a strange thing to be doing but here's code that meets your requirements.
$('select').on('change', function() {
if (this.value == '-1') {
$('optgroup option').prop('disabled', true);
} else {
$('optgroup option').prop('disabled', false);
}
});
Live Example - http://jsfiddle.net/NpNFh/
You can use the following code.Let us consider you have three select boxes as follows
<select class="sel_box" id="sel_1" onchange="disable_sel(this.value);" ></select>
<select class="sel_box" id="sel_2" onchange="disable_sel(this.value);" ></select>
<select class="sel_box" id="sel_3" onchange="disable_sel(this.value);" ></select>
and in function let 'opt' is argument now use following
$('.sel_box option[value="'+opt+'"]').attr("disabled", true);
You can use two variations on the syntax for the disabled attribute, depending on the version of HTML you are targeting:
HTML4: <option value="spider" disabled>Spider</option>
XHTML: <option value="spider" disabled="disabled">Spider</option>