Question

我有两个下拉列表，第二个填写第一个的更改。我使用json，但它不起作用。这是我的代码：

        <div class="col-md-6">
            @Html.LabelFor(model => model.Counterparts.First().Name, new {@class = "control-label"})
            @Html.DropDownListFor(m => m.CounterpartId, new SelectList(Model.Counterparts, "Id", "Name"), "select", new {@id = "SelectDepartment", onchange = "getData();"})
        </div>
     <div class="col-md-6">
            @Html.LabelFor(model => model.Accounts.First().Name, new { @class = "control-label" })
            @Html.DropDownListFor(m => m.AccountId, new SelectList(Model.Accounts, "Id", "Name"), "select", new { @class = "form-control" })

        </div>

       <script type="text/javascript" language="javascript">
            function getData() {

                var e = document.getElementById("SelectDepartment");
                var counterpartid = e.options[e.selectedIndex].value;
                alert('/ProcessCounterpart/GetCounterpartAccounts/' + counterpartid.toString());
                $.getJSON('/ProcessCounterpart/GetCounterpartAccounts/' + counterpartid.toString(), function (data) {
                    alert(data);
                });

            }
        </script>


  public JsonResult GetCounterpartAccounts(int id)
    {

        var accounts = _accountService.GetAllAccountByCounterpartId(id);
        return Json(accounts,JsonRequestBehavior.AllowGet);
    }

Answer 1

我建议您研究如何在MVC中实现Cascading DropdownLists。网上有很多文章，如：

Easiest way to create a cascade dropdown in ASP.NET MVC 3 with C#

http://www.c-sharpcorner.com/UploadFile/4d9083/creating-simple-cascading-dropdownlist-in-mvc-4-using-razor/

我会去JQuery路线;因为这是最简单的一个。这里的想法是填充两个下拉列表，然后使用JQuery根据Parent中的选择（即第一个）隐藏或禁用Child下拉列表中的选项（即第二个）。

Answer 2

我个人建议使用selectize插件。每次更改下拉列表时都会触发onchange事件。你也可以通过ajax调用来填充选项，这就是你在寻找什么。这是一个例子：

  $("#countriesDropDown").selectize({
         load: function(query, callback) {
               $.get("api/getCountries").done(function (data) {
                     if(data !== '') { callback(data) })
                .fail(function(xmlHttpRequest, textStatus, errorThrown)  {});
         },
         onChange: function(value) { loadCitylistByCountry(value); }
  });

  var $citiesSelectize = $("#citiesDropDown").[0].selectize;
    
  
  function loadCitylistByCountry(value) {
    $citiesSelectize.load(function(callback) {
      $.get("api/getCitiesByCountry?coutryId=" + value).done(function (data) {
                     if(data !== '') { callback(data) })
                .fail(function(xmlHttpRequest, textStatus, errorThrown)  {});
      });
    });
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="countriesDropDown" type="text" />
<input id="citiesDropDown" type="text" />

请注意，这只是一个例子。此代码可能甚至不起作用。这只是为了向您展示如何使用它。你可以去他们的网站，你会发现很多例子和api。希望这会有所帮助

使用json填充相关的下拉列表

2 个答案: