javascript - JavaScriptで別のSELECT複数値を使用してSELECT複数リストを更新します（erichynds multiselectウィジェットを使用）

Question

いくつかの異なるセクションにパラメーターのリストを表示するために、2 つの複数選択ボックス (このプラグインを使用) があります。

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

セクション リストからいくつかを選択し、フォームの get および submit 入力を使用して値を渡し、パラメーター リストを埋めます。

「クリックして送信」ステップを取り除き、2 番目のリストを動的に入力したい。つまり、section1 と section3 を選択すると、2 番目のリストは section1 と section3 とそれぞれのサブオプションで満たされ、section2 を追加すると、2 番目のリストはsection1、2、3 とそのサブオプションで更新され、埋められました。

javascript を使用してそれを行う方法はありますか?

私がやりたいこととは関係ありませんが、 #select_B にプラグインを適用する (これらの行のコメントを外す) ときに関数が機能しないのはなぜですか? 競合はありますか？ http://jsfiddle.net/8T6fU/10/

$(function(){
    $("#select_B").multiselect({
    noneSelectedText: "Choose Parameters"
    }).multiselectfilter();
});

- - - - - - - - -編集 - - - - - - - - -

これは私が試したものです:

jsfiddle.net/8T6fU/22/ (同じ投稿に 2 つのリンクを入れることができなかったため、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 に関連する値を削除するにはどうすればよいですか?