Question

我正在尝试实施可搜索的下拉列表。我找到了下面的链接，并试图实现相同的。

http://developmentpassion.blogspot.in/2014/01/searchable-dropdown-in-aspnet-mvc-4.html

我可以获得下拉菜单但无法搜索。

有人可以帮助我如何在ASP.NET MVC中获取可搜索的下拉列表？

谢谢，巴鲁

Answer 1

请使用bootstrap和jquery找到下面给出的解决方案，这可以在以后使用asp.net动态实现

<div class="container">
<div class="row">
  <h2>Bootstrap-select example</h2>
  <p>This uses <a href="http://silviomoreto.github.io/bootstrap-select/">http://silviomoreto.github.io/bootstrap-select/</a></p>
  <hr />
</div>

<div class="row-fluid">
  <select class="selectpicker" data-show-subtext="true" data-live-search="true">
    <option data-subtext="Rep California">Tom Foolery</option>
    <option data-subtext="Sen California">Bill Gordon</option>
    <option data-subtext="Sen Massacusetts">Elizabeth Warren</option>
    <option data-subtext="Rep Alabama">Mario Flores</option>
    <option data-subtext="Rep Alaska">Don Young</option>
    <option data-subtext="Rep California" disabled="disabled">Marvin Martinez</option>
  </select>
  <span class="help-inline">With <code>data-show-subtext="true" data-live-search="true"</code>. Try searching for california</span>
</div>

要使用的库列表..

// netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css //cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.min.css https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js //cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.min.js

Answer 2

我能够使用

完成

<script src="@Url.Content("~/Scripts/CustomsSelect/jquery-customselect.js")" type="text/javascript"></script>

$(function () {
    $("#Group_Country").change(function () {
        var options = {};

        options.url = "/Admin/GetCity";
        options.type = "POST";
        options.data = JSON.stringify({ country: $("#Group_Country").val() });
        options.dataType = "json";
        options.contentType = "application/json";
        options.success = function (data) {
            $("#Group_City").empty();
            for (var i = 0; i < data.length; i++) {
                var opt = data[i].split('-');
                $("#Group_City").append("<option value=" + opt[0] + ">" + opt[1] + "</option>");
            }
            $("#Group_City").customselect("destroy"); // this is the binding mechanisam
            $("#Group_City").customselect(); // this is the binding mechanisam
        };
        options.error = function () { $("#Group_Country").focus(); };
        $.ajax(options);

    });


@Html.DropDownListFor(model => model.Group_City, list, new { @class = "custom-select" })

这是我用来实现可搜索下拉列表的整个过程

Asp.net mvc 4中的可搜索下拉列表

2 个答案: