Question

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

我从select_A多次选择opt1和opt2，select_B将显示仅包含id=sub1和id=sub2的optgroup选项，如果我取消选择opt1并从中选择opt3 select_A，select_B将移除optgroup sub1并保留sub2和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>

我已经有了一个解决方案，可以在here中隐藏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

请参阅：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();
 });

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

1 个答案: