Update SELECT multiple list using another SELECT multiple list
Hi,
I am trying to dynamically update a select list based on choices of a previous list. (with erychynds multiselect plugin)
http://jsfiddle.net/8T6fU/22/
Here is my select example :
HTML Code:
<select id="Category" multiple="multiple" onChange="TestSubCat();">
<option value="FirstCat" id="FirstCat">FirstCat</option>
<option value="SecondCat" id="SecondCat">SecondCat</option>
</select>
<select id="SubCat" name="SubCat" multiple="multiple">
</select>
What I tried so far :
Code:
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");
}
I have a problem with writing the right condition in the if statement to avoid appending optgroup and its options when it's already done.
Also, I hardcoded the index for select.remove() but I don't know what to put to get the index related to the optgroup's options. I've also noticed that with no plugin, when removing, the optgroup label stays. How do I remove it in a clean way ?
