jquery - Jquery 为第二个选择框动态填充 optgroup

Question

我在两个多选框中有一个很长的选项列表，我想动态填充select_B基于的选项select_A，例如：

我多次选择 opt1 和 opt2 from select_A，select_B将显示 optgroup 的选项，id=sub1并且id=sub2只有，如果我取消选择 opt1 并选择 opt3 from select_A，select_B将删除 optgroupsub1并保留sub2and sub3，依此类推，具有控制的灵活性。

<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>

我已经有了在 Chrome 和 IE 中隐藏 optgroup 的解决方案：

<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>

请帮助和感谢。

Answer 1

看到这个：样本

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