JQuery와, 나는 예를 들어, 동적 <code>select_A</code>에 따라 <code>select_B</code>에 대한 옵션을 채우려 동적

Question

나는 두 개의 다중 선택 상자의 옵션의 아주 긴 목록을 가지고 두 번째 선택 박스에 대한 OPTGROUP 웁니다 내가 OPT1 취소하고 select_A에서 opt3을 선택하면 select_A에서 select_B는 만 id=sub1 및 id=sub2와 OPTGROUP있는 옵션이 표시됩니다, select_B 제어의 유연성 등 sub1을 OPTGROUP 제거하고 sub2 및 sub3을 유지하고 있습니다.

<script> 
$(document).ready(function() { 
    $.fn.hideOptionGroup = function() { 
     $(this).hide(); 
     $(this).children().each(function(){ 
     $(this).attr("disabled", "disabled").removeAttr("selected"); 
    }); 

    $(this).appendTo($(this).parent()); 

    } 

    $.fn.showOptionGroup = function() { 
     $(this).show();  
     $(this).children().each(function(){ 
     $(this).removeAttr("disabled"); 
    }); 

     $(this).prependTo($(this).parent()); 
     $(this).parent().animate({scrollTop:0},0); 
    } 



    $("#sub1,#sub2").showOptionGroup(); 
    $("#sub1,#sub2").hideOptionGroup(); 
}); 
</script> 

도움을 감사하십시오

<select id="select_A" multiple="multiple" size="10"> 
    <optgroup label="group 1"> 
     <option value="opt1" id="main1">opt1</option> 
     <option value="opt2" id="main2">opt2</option> 
    <optgroup label="group 2"> 
     <option value="opt3" id="main3">opt3</option> 
</select> 

<select id="select_B" multiple="multiple" size="10"> 
    <optgroup label="opt1" id="sub1" style="display:none;"> 
     <option value="1A">1A</option> 
     <option value="1B">1B</option> 

    <optgroup label="opt2" id="sub2" style="display:none;"> 
     <option value="2A">2A</option> 
     <option value="2B">2B</option> 

    <optgroup label="opt3" id="sub3" style="display:none;"> 
     <option value="3A">3A</option> 
     <option value="3B">3B</option> 
</select> 

는 이미 here에서 크롬과 IE에서 OPTGROUP 숨기기에 대한 해결책을 가지고 있습니다.

Answer 1

이를 참조하십시오 Sample

$("#select_A").change(function() { 
    $("#select_B").children("optgroup").children().prop("disabled", "disabled").prop("selected", false); 
    var arr = $(this).val(); 
    for (var i = 0; i < arr.length; i++) { 
     $("#select_B").children("optgroup[label=" + arr[i] + "]").children().prop("disabled",false).prop("selected", "selected"); 
    } 
    $("#select_B").focus(); 
});