使用javascript使用另一个SELECT多个值更新SELECT多个列表(使用erichynds multisele

Update SELECT multiple list using another SELECT multiple values with javascript (using erichynds multiselect widget)

本文关键字：使用 SELECT 列表 erichynds multisele 更新 javascript 另一个      更新时间：2023-09-26

我有两个多选框(使用这个插件)来显示几个不同部分的参数列表。

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

从sections列表中，我选择了一些，然后使用表单get传递这些值，并提交输入以填充参数列表。

我想摆脱"点击提交"步骤并动态填充第二个列表:如果我选择section1和section3，第二个列表将被section1和section3及其各自的子选项填充，如果我添加section2，第二个列表将刷新并填充section1,2,3及其子选项。

有一种方法来做它使用javascript ?

与我想做的无关，但为什么在#select_B上应用插件(取消注释这些行)时函数不工作?有冲突吗?http://jsfiddle.net/8T6fU/10/

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

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

这是我尝试过的:

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相关的值?

我将为第一个选择框做一个on change事件:

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