使用另一个selectmultiplevalueswithjavascript更新selectmultiplelist（使用erichyndsmultiselect小部件）

我有两个多选框，使用插件在几个不同的部分显示参数列表

<select id="select_A" multiple="multiple">
    <option value="sec-1" id="main1">section1</option>
    <option value="sec-2" id="main2">section2</option>
    <option value="sec-3" id="main3">section3</option>
</select>

<select id="select_B" multiple="multiple">
    <optgroup label="section-1" id="sub1">
        <option value="1A">1A</option>
        <option value="1B">1B</option>
    <optgroup label="section-2" id="sub2">
        <option value="2A">2A</option>
        <option value="2B">2B</option>
    <optgroup label="section-3" id="sub3">
        <option value="3A">3A</option>
        <option value="3B">3B</option>
</select>

---------编辑---------

这就是我所尝试的：

jsfiddle.net/8T6fU/22/删除了http，因为我不能在同一篇文章中放置两个链接

function TestSubCat()
{
    var select = document.getElementById("SubCat");
    var optG = document.createElement("OPTGROUP");
    var G = select.getElementsByTagName("optgroup");

    //var optGExists = G[0].length < 0;
    //if(typeof G[0].label != null){alert("undef");}
    //alert(G[0].label);
    var optGExists = select.length < 0;

    if(document.getElementById("Category").options[0].selected == true && !optGExists)
    {          
        if(optG.label !== "FirstCat")
        {
            optG.label = "FirstCat";
            select.appendChild(optG);
            optG.appendChild(new Option("reboot","FirstCat[reboot]"));
            optGExists = true;
        }
    }
    if(document.getElementById("Category").options[0].selected == false)
    {
        select.remove(0);
        optGExists = false;
    }

    if(document.getElementById("Category").options[1].selected == true)
    {
        if(optG.label !== "SecondCat")
        {
            optG.label = "SecondCat";
            select.appendChild(optG);
            optG.appendChild(new Option("Port","SecondCat[Port]"));
        }
    }
    if(document.getElementById("Category").options[1].selected == false)
    {
        select.remove(1);
    }

    $("#SubCat").multiselect("refresh");
}

我知道optGExists是错的，但我不能做对。。 基本上，如果optgroup标签已经存在于SubCat列表中，我希望避免追加

---

我还遇到了select.remove的问题。出于测试目的，我只是硬编码了索引。如何删除与右optgroup相关的值

我会为第一个选择框执行一个更改事件：

$('#select_A').on('change', function(){
    $("#select_B").multiselect({
         noneSelectedText: "Choose Parameters"
    }).multiselectfilter();
});

---

那不行。当从第一个框中选择一个选项时，它只会激活multiselect插件；以实际显示更改。这回答了我的第二个问题。

$('#select_A').on('change', function(){
    $("#select_B").multiselect({
         noneSelectedText: "Choose Parameters"
    }).multiselectfilter();
});