Results 1 to 2 of 2

Thread: Update SELECT multiple list using another SELECT multiple list

  1. #1
    Join Date
    May 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,953
    Thanks
    43
    Thanked 3,195 Times in 3,157 Posts
    Blog Entries
    12

    Default

    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Similar Threads

  1. Replies: 1
    Last Post: 02-27-2012, 01:50 AM
  2. Resolved Php select by list item
    By john0611 in forum PHP
    Replies: 2
    Last Post: 07-22-2009, 03:20 PM
  3. How to update an array from multiple select
    By leetee4000 in forum JavaScript
    Replies: 0
    Last Post: 06-05-2009, 03:28 PM
  4. asp select list
    By mini_minh in forum ASP
    Replies: 3
    Last Post: 05-20-2007, 11:40 AM
  5. Refreshing a drop-down list/select list
    By bbrant in forum JavaScript
    Replies: 1
    Last Post: 02-06-2007, 07:13 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •