下拉mvc 4 razor selectpicker問題dropdown數據dropdon從隱藏選擇

Question

我想要顯示我的隱藏選擇數據dropdown-menu inner selectpicker UL默認選擇「 - 選擇 - 」。

MVC的Html

@Html.DropDownListFor(model => model.BrandName, Model.CompanyItems, "--Choose Brand--", new { @id = "Brand", @class = "select", required = "required" }) 

型號名在希望的顯示效果上的瀏覽器

@Html.DropDownListFor(model => model.ModelName, Model.ModelItems, "--Choose Model--", new { @id = "ModelName", @class = "select", required = "required" }) 

結果HTML顯示結果隱藏選擇

<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> 

在這裏，我想在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> 

顯示在瀏覽器中隱藏選擇選項Value=""結果的JavaScript用於充裝選擇隱藏值

$(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); 
     }); 
    }); 
    }); 
}); 

我如何可以覆蓋

<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> 

在我上面寫的JavaScript中。

Answer 1

請訪問以下鏈接 https://www.asp.net/mvc/overview/older-versions/working-with-the-dropdownlist-box-and-jquery/examining-how-aspnet-mvc-scaffolds-the-dropdownlist-helper

我希望這是你的解決方案....

Answer 2

您需要與li綁定事件，只要你在dropdown-menu

Working Example

HTML

<div class="btn-group"> 
    <button id="dropdownModel" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
    --Choose Model-- <span class="caret"></span> 
    </button> 
    <ul id="dropdownModelList" class="dropdown-menu"> 
    </ul> 
</div> 

附加JS

var data = [{ 
    Value: "1", 
    Text: "text1" 
}, { 
    Value: "2", 
    Text: "text2" 
}, { 
    Value: "3", 
    Text: "text3" 
}]; 

$(function() { 
    function createOption(val, text) { 
     return '<li rel="0" class="" data-value="' + val + '"><a tabindex="0" class="" style=""><span class="text">' + text + '</span><i></i></a></li>'; 
    } 

    $("#dropdownModelList").html(createOption("-1", "--Choose Model--")); 
    for (var i = 0; i < data.length; i++) { 
     $("#dropdownModelList").append(createOption(data[i].Value, data[i].Text)); 
    } 
    $("#dropdownModelList li").click(function(e) { 
     $("#dropdownModel").html($(this).find("a").html()); 
     $("#dropdownModelList li").find("i").removeClass(); 
     $(this).find("i").addClass("glyphicon glyphicon-ok icon-ok check-mark"); 
    }); 
}); 

更新

$.getJSON('@Url.Action("GetModelNames")?Brand=' + v, function(data) { 
    $.each(data.ModelItems, function(a, b) { 
    $("#dropdownModelList").append(createOption(b.Value, b.Text)); 
    }); 
    //bind event again $("#dropdownModelList li").click(...) 
});