我有两个多选框(使用这个插件)来显示几个不同部分的参数列表。
<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>
从部分列表中,我选择了一些,然后使用表单获取传递值并提交输入以填充参数列表。
我想摆脱“点击提交”步骤并动态填充第二个列表,即:如果我选择 section1 和 section3,第二个列表将填充 section1 和 section3 及其各自的子选项,如果我添加 section2,第二个列表是刷新并填充第 1、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 是错误的,但不能正确。基本上,如果 subCat 列表中已经存在 optgroup 标签,我想避免附加。
我也有 select.remove() 的问题。出于测试目的,我只是对索引进行了硬编码。如何删除与正确 optgroup 相关的值?