Question

我想要在dropdown-menu inner selectpicker ul中显示隐藏的选择数据，并选择默认的“--choose--”。

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>

在此，我想在Value=""

中的浏览器隐藏选择选项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

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

每当您追加到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(...)
});

下载mvc 4 razor selectpicker问题，从隐藏的Select中删除dropdon中的数据

1 个答案: