jsonを使用して、依存するドロップダウンリストを

私は2つ目のドロップダウンリストを最初の1つの変更によって満たしています。 jsonを使用していますが、動作しません。ここに私のコードです：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); 
    }

出典

2016-05-10 user3698913

「うまくいかない」とはどういう意味ですか？ – Andrei

@Andrei：GetCounterpartAccountsメソッドで取得したアカウントを返し、2番目のドロップダウンを入力する必要がありますが、機能しません。 – user3698913

あなたのコードは現在ドロップダウンをいっぱいにしていませんが、単にjsonとアラートの出力を要求するだけです。それは動作しますか？何かエラーが表示されますか？「うまくいきません」は問題の説明があまりにも曖昧です – Andrei

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を見つけるでしょう。これが役に立ちますようにお願いします。

出典

2016-05-10 14:35:16