38 users online (0 members and 38 guests)  


  Results 1 to 3 of 3

Related

  1. Replies: 1
  2. Need Help : mysql advanced SELECT issue    Forum: Databases
    Replies: 6
  3. CSS and select    Forum: CSS Forum
    Replies: 1
  4. links and select box    Forum: CGI Perl Forum
    Replies: 0
  1. #1
    Timeass's Avatar
    New User

    Status
    Offline
    Join Date
    Nov 2006
    Posts
    2

    Unhappy Multiple Select Issue

    Hi,

    I have this multiple select box with categories and subcategories, and what I want is when you click a category, all the subcategories of that category are automatically selected as well. I managed to get that working, but the problem is that when the event - onclick - is activated and it passes the value of the select box, it only passes the first element of the selected ones, the selected value listed at the top of the select box. Say you have a list with these values:

    Category
    - Subcategory
    - Subcategory

    When the Main category is already selected - and then so are the subcategories - and I press a subcategory, it passes the value of the first selected element - the main category - instead of the subcategory and the subcategories get selected once again. This way I can never deselect a subcategory. Another issue: when you have two main categories with subcategories - the first one is selected - and you click the second one, it passes the value of the first one and the subcategories of the second one don't get selected !

    I don't know if there's a workaround for this problem or some kind of solution?

    Thanks in advance,
    Timeass

    function selectsubcat(id)
    {
    // subcategories have an id that starts with 'sub'
    if(id.charAt(0) != 's')
    {
    for(i=0; i<document.getElementById('catselect').options.length;i ++)
    {
    if(document.getElementById('catselect').options[i].value.indexOf('sub*'+id+'*') != -1)
    {
    document.getElementById('catselect').options[i].selected = true;
    }
    }
    }
    }

  2. #2
    ALL's Avatar
    Super Dooper Nerd

    Status
    Offline
    Join Date
    Feb 2005
    Location
    localhost
    Posts
    382

    Re: Multiple Select Issue

    can you post all the code along with the html so we can see exactly what you want to do?

  3. #3
    Timeass's Avatar
    New User

    Status
    Offline
    Join Date
    Nov 2006
    Posts
    2

    Re: Multiple Select Issue

    OK, I managed to fix the problem. I'll post the code below, but now there's another issue: It doesn't work in IE7

    In IE7, the function returns the id of the select tag rather than the id of the option seleted. In every other browser it works fine, IE6 too.

    Don't know if anybody knows a solution to this problem?

    PHP Code:
    <html><head>
    <
    script type="text/javascript">
    function 
    init() {
        $(
    'woo').onclick klik;
    }

    window.onload init;


    function $(
    id
    { return 
    document.getElementById(id); }


    function 
    klik(e) {
        if (!
    e) var window.event;
        var 
    el e.target e.target e.srcElement;
        
    selectsubcat(el.id);
    }

    function 
    selectsubcat(optid)
    {
          var 
    mainid = $('woo').options[optid].value;
        if(
    mainid[0] != 's')
        {
              for(
    0< $('woo').options.lengthi++)
            { 
                if($(
    'woo').options[i].value.indexOf('sub '+mainid+' ') != -&& $('woo').options[optid].selected == true
                { $(
    'woo').options[i].selected true; }
                
                if($(
    'woo').options[i].value.indexOf('sub '+mainid+' ') != -&& $('woo').options[optid].selected == false
                { $(
    'woo').options[i].selected false; }
            }
        }
        else
        {
              if($(
    'woo').options[optid].selected == false)
              { 
                
    mymatch = /^sub (\d+) \d+/.exec($('woo').options[optid].value);
                
    parentid mymatch[1];
                for(
    0< $('woo').options.lengthi++)
                { if($(
    'woo').options[i].value == parentid) { $('woo').options[i].selected false; break; } }
                
            }
            if($(
    'woo').options[optid].selected == true)
            {
                  var 
    check true;
                  
    mymatch = /^sub (\d+) \d+/.exec($('woo').options[optid].value);
                
    parentid mymatch[1];
                var 
    reggy = new RegExp('^sub ' parentid ' ');
                for(
    0< $('woo').options.lengthi++)
                {
                    if($(
    'woo').options[i].value[0] != 's') { continue; }
                    if($(
    'woo').options[i].value.match(reggy) && $('woo').options[i].selected == false) { check false; break; }
                }
                if(
    check == true
                {
                      for(
    0< $('woo').options.lengthi++)
                    { if($(
    'woo').options[i].value == parentid) { $('woo').options[i].selected true; break; } }
                }
            }
        }
    }
    </script>
    </head><body>
    <span id="debug"></span>
    <select size="7" id="woo" multiple="true">
    <option id='0' value="1">wan</option>
    <option id='1' value="sub 1 4"> - too</option>
    <option id='2' value="sub 1 5"> - sree</option>
    <option id='3' value="2">fower</option>
    <option id='4' value="sub 2 6"> - phive</option>
    <option id='5' value="3">shicks</option>
    </select>
    </body></html> 



Tags for this Thread