다른 드롭 다운 (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"); 

     }); 

:

이

내가 다른 잠재적 인 솔루션 온라인의 기반으로 한 시도이다.
감사합니다. 내가 작업이 솔루션을 입수했습니다

EDIT 그러나 그것은 내가 두 번째를 필터링 할 수 없습니다 위치 '목록을 대체합니다. 당신이이 문제를 해결 (를) 대체 할 수있는 다른 방법을 알고 있다면, 아래 게시하시기 바랍니다

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

:

EDIT2
이 은 ViewBag에 데이터를 저장하는 컨트롤러에서 두 줄입니다.
감사

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"); 

    });