过滤器选择下拉选择下拉（使用JQuery）

Question

我有一个ASP.NET MVC程序，其中包含两个下拉列表，国家和地点。 两者都从存储在ViewBag中的SelectLists填充。

我想要做的是在第一个下拉列表中选择该国家时按组（国家）过滤位置。 （或者通过告诉程序隐藏不在该组中的选项，或者以某种方式自动填充选定的搜索栏与组？）

我已经尝试过各种解决方案，但不能完全得到它工作。

这是我基于了另一个潜在的解决方案在网上的尝试：

 $("#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"); 

     }); 

任何帮助，将不胜感激。
谢谢。

编辑
我已经得到了这个解决方案的工作，但它取代了位置列表，所以我不能过滤第二次。

EDIT2
这些都是来自控制器的两条线将数据存储到ViewBag：

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

如果您知道任何替代方法来解决这个问题，请后下。
感谢

Answer 1

只是一句你再次绑定在html之前：

$("#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"); 

    });