フィルタ選択されたグループ別のドロップダウン（JQueryを使用）

Question

私は2つのドロップダウンリスト、国と場所を含むASP.NET MVCプログラムを持っています。 両方とも、ViewBagに格納されているSelectListから読み込まれます。

最初のドロップダウンリストでその国が選択されている場合は、グループ（国）別にロケーションをフィルタリングします。 （グループに含まれていないオプションを隠すようにプログラムに指示するか、選択した検索バーをグループに自動入力するかのどちらかで）？

私は様々な解決方法を試しましたが、作業。

 $("#Countries").on('change', function (evt, params) { 
      var selected = params.selected; 

      //var optGroup = $('optgroup[label="' + selected + '"]')[0].outerHTML; 
      var optGroup = $('optgroup[label="' + selected + '"]').html(); 
      $("#Locations").html(optGroup); 
      $("#Locations").trigger("chosen:updated"); 

     }); 

任意の助けをいただければ幸いです。

これは私が別の潜在的なソリューションオンラインのオフに基づいている試みです。
ありがとうございます。私が動作するように、このソリューションを得ている

EDITは、しかし、それはので、私は二度目をフィルタリングすることができない場所のリストを置き換えます。

EDIT2
これらはViewBagにデータを格納し、コントローラから2行です：あなたはこれを解決するための任意の代替方法を知っている場合は、下記投稿してください

ViewBag.Countries = new MultiSelectList(db.tblCountries, "CountryID", "CountryName"); 
ViewBag.Locations = new MultiSelectList(db.tblLocations, "LocationID", "LocationName", "tblCountry.CountryName"); 

。あなたがもう一度HTMLをバインドする前に、ちょうど空の
おかげ

Answer 1

：

$("#Countries").on('change', function (evt, params) { 
     var selected = params.selected; 

     //var optGroup = $('optgroup[label="' + selected + '"]')[0].outerHTML; 
     var optGroup = $('optgroup[label="' + selected + '"]').html(); 
     $("#Locations").empty(); 
     $("#Locations").html(optGroup); 
     $("#Locations").trigger("chosen:updated"); 

    });