선택 옵션 표시 문제

Question

내 페이지에 서버에 채워지는 두 개의 선택 항목이 있습니다. 여기에서 맨 위 선택은 유효하지 않은 옵션에 hidden 속성을 적용하여 하단 선택에서 선택할 수있는 옵션을 필터링하는 "마스터"선택입니다.

예를 들어,이 하단 선택에는 50 가지 옵션이 있지만 그 중 3 가지만이 "Tyler 's Insurance"(아래 그림 참조)에 적용됩니다. 따라서 잘못된 옵션이 숨겨집니다. 그러나 많은 경우 숨김으로 표시하면 선택 옵션이 축소되어 오른쪽에 작은 스크롤 막대가있는 옵션 하나만 표시됩니다. 화살표를 클릭하면 예상대로 옵션 목록이 위 아래로 스크롤되며 다른 모든 옵션이 있습니다. 이것은 때때로 발생합니다. 여기

이 논리를 수행하는 변경 기능이고; 거기에이 단일 행 상자에 붕괴에서 볼 수있는 옵션을 방지 할 수있는 방법이며, 만약 그렇다면, 어떻게 이렇게 가겠어요 경우

$(top).change(function() { 
//First, we make all options invisible. 
    $(bottom).find('option').prop("hidden", true); 
//Then, if the selected option in the top select's ID is the same as the 
//stored one on the bottom option, we unhide the option. 
    $(bottom).find('option[data-id="' + this.selectedOptions[0].dataset.id + '"]').prop("hidden", false); 
} 

내 질문은?

추가 정보 :

아무것도 다른 변화 중 하나를 선택, 다른 선택이 문제가있는 표시되지 않습니다.

Google 크롬, 버전 63.0.3239.84 (공식 빌드) (64 비트)를 대상으로합니다. 우리는 jQuery 2.1.4와 Bootstrap 3.3.0을 사용합니다.

최신 파이어 폭스 57.0.2 (64 비트)에 노력하는 것은 ...

Answer 1

내가 생각 해낸 해결책을이 오류를 갖고있는 것 같다, 그래서 나는 크롬 선택을 표시하는 방법의 문제라고 생각하지 않습니다 ;

$(top).change(function() { 
//First, we remove all options. 
$(bottom).empty() 
//Declaring variables here, for clarity; I'd inline them normally. 
//The selected option: 
var selectedID = this.selectedOptions[0].dataset.id; 
//filtered options 
var options = $($("#OptionListTemplate").html()) 
       .filter(function (obj) { return $(this).data("top-id") == selectedID }); 
//simply append the filtered options to the select. 
$(bottom).append(options); 
} 

그리고 필요한 마크 업;

<template id="OptionListTemplate"> 
     <option data-top-id="0">Select an option</option> 
     <!--- Populated by controller, more options would go here.--> 
    </template> 

숨겨진 속성이나 스타일을 사용하는 대신 템플릿에서 모든 값을 저장하고 필요없는 것을 필터링합니다. 이렇게하면 디스플레이 문제가 올바르게 해결됩니다.