Update SELECT multiple list using another SELECT multiple list

[MickShake]

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 :


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


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 ?

[jscheuer1]

You might be interested in this thread:

http://www.dynamicdrive.com/forums/showthread.php?74267-Cascading-Dropdown-from-CSV

or this script:

http://www.dynamicdrive.com/dynamicindex16/chainedselects/index.htm