I need to show my hidden select data in dropdown-menu inner selectpicker ul with the default "--choose--" option selected.
ASP.NET MVC Razor Syntax
@Html.DropDownListFor(model => model.BrandName, Model.CompanyItems, "--Choose Brand--", new { @id = "Brand", @class = "select", required = "required" })
Displaying the result in the Model Name
@Html.DropDownListFor(model => model.ModelName, Model.ModelItems, "--Choose Model--", new { @id = "ModelName", @class = "select", required = "required" })
HTML Result displayed in a Hidden Select in the Browser
<select class="select" data-val="true" data-val-required="Please Choose Model Name." id="Model" name="ModelName" style="display: none;">
<option value="AQUA i5 HD">AQUA i5 HD</option>
<option value="Intex AQUA FISH">Intex AQUA FISH</option>
<option value="Intex AQUA ACE">Intex AQUA ACE</option>
<option value="Intex AQUA CRAZE">Intex AQUA CRAZE</option>
</select>
Displaying the result in a Hidden Select with option Value="" in ul li
<div class="dropdown-menu open" style="max-height: 107px; overflow: hidden; min-height: 0px;">
<ul class="dropdown-menu inner selectpicker" role="menu" style="max-height: 105px; overflow-y: auto; min-height: 0px;">
<li rel="0" class=""><a tabindex="0" class="" style=""><span class="text">--Choose Model--</span><i class="glyphicon glyphicon-ok icon-ok check-mark"></i></a></li>
</ul>
</div>
JavaScript code for populating hidden Select values
$(document).ready(function() {
$("#Brand").change(function() {
$("#Model").empty();
var v = $(this).val();
$.getJSON('@Url.Action("GetModelNames")?Brand=' + v, function(data) {
$.each(data.ModelItems, function(a, b) {
var option = '<option value="' + b.Value + '">' + b.Text + '</option>';
$("#Model").append(option);
});
});
});
});
How can I customize
<ul class="dropdown-menu inner selectpicker" role="menu" style="max-height: 105px; overflow-y: auto; min-height: 0px;">
<li rel="0" class=""><a tabindex="0" class="" style=""><span class="text">--Choose Model--</span><i class="glyphicon glyphicon-ok icon-ok check-mark"></i></a></li>
</ul>
In the JavaScript code mentioned above.