按另一个下拉列表选择的组(使用 JQuery)筛选"已选择"下拉列表

Question

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

我想做的是在第一个下拉列表中选择该国家/地区时按组(国家/地区)过滤位置。 (要么告诉程序隐藏不在那个组中的选项，要么以某种方式用该组自动填充所选搜索栏？

我已经尝试了各种解决方案，但无法完全使其工作。

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

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