Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11

Thread: Dynamic Lists

  1. #1
    Senior Coder NancyJ's Avatar
    Join Date
    Feb 2005
    Location
    Bradford, UK
    Posts
    3,172
    Thanks
    19
    Thanked 65 Times in 64 Posts

    Dynamic Lists

    Ok, so this is what I want to do - it may not be possible but I thought if anyone knows, its you guys.
    I have a form that has a dynamic number of select boxes.
    Each of the select boxes are generated dynamically, but they all have the same values.
    I want to build it so that if a value is selected in one of the boxes, it is removed from all the others. And if the value is changed, the value goes back in to all.

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,505
    Thanks
    3
    Thanked 501 Times in 488 Posts
    working on this

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    </head>
    
    <body onload="InitSel('fred');">
    <a id="fred" >
    <select onchange="zxcRemoveDuplicates(this,1);" style="width:80px;" ></select>
    <select onchange="zxcRemoveDuplicates(this,1);" style="width:80px;" ></select>
    <select onchange="zxcRemoveDuplicates(this,1);" style="width:80px;" ></select>
    <select onchange="zxcRemoveDuplicates(this,1);" style="width:80px;" ></select>
    <select onchange="zxcRemoveDuplicates(this,1);" style="width:80px;" ></select>
    </a>
    <br>
    <a >
    <select onchange="zxcRemoveDuplicates(this,0);" style="width:80px;">
    <option value="0" >Tom</option>
    <option value="0" >Dick</option>
    <option value="0" >Harry</option>
    <option value="0" >Joe</option>
    <option value="0" >Charley</option>
    </select>
    <select onchange="zxcRemoveDuplicates(this,0);" style="width:80px;" >
    <option value="0" >Tom</option>
    <option value="0" >Dick</option>
    <option value="0" >Harry</option>
    <option value="0" >Joe</option>
    <option value="0" >Charley</option>
    </select>
    <select onchange="zxcRemoveDuplicates(this,0);" style="width:80px;" >
    <option value="0" >Tom</option>
    <option value="0" >Dick</option>
    <option value="0" >Harry</option>
    <option value="0" >Joe</option>
    <option value="0" >Charley</option>
    </select>
    <select onchange="zxcRemoveDuplicates(this,0);" style="width:80px;" >
    <option value="0" >Tom</option>
    <option value="0" >Dick</option>
    <option value="0" >Harry</option>
    <option value="0" >Joe</option>
    <option value="0" >Charley</option>
    </select>
    </a>
    <br>
    
    <a id="Tom" >
    <select onchange="zxcRemoveDuplicates(this,0);" style="width:80px;">
    <option value="0" >Tom</option>
    <option value="0" >Dick</option>
    <option value="0" >Harry</option>
    <option value="0" >Joe</option>
    <option value="0" >Charley</option>
    </select>
    <select onchange="zxcRemoveDuplicates(this,0);" style="width:80px;" >
    <option value="0" >Tom</option>
    <option value="0" >Dick</option>
    <option value="0" >Harry</option>
    <option value="0" >Joe</option>
    <option value="0" >Charley</option>
    </select>
    <select onchange="zxcRemoveDuplicates(this,0);" style="width:80px;" >
    <option value="0" >Tom</option>
    <option value="0" >Dick</option>
    <option value="0" >Harry</option>
    <option value="0" >Joe</option>
    <option value="0" >Charley</option>
    </select>
    <select onchange="zxcRemoveDuplicates(this,0);" style="width:80px;" >
    <option value="0" >Tom</option>
    <option value="0" >Dick</option>
    <option value="0" >Charley</option>
    <option value="0" >Harry</option>
    <option value="0" >Joe</option>
    <option value="0" >Charley</option>
    <option value="0" >Charley</option>
    <option value="0" >Charley</option>
    <option value="0" >Charley</option>
    <option value="0" >Vic</option>
    </select>
    </a>
    <script language="JavaScript" type="text/javascript">
    <!--
    
    function InitSel(zxcid,zxcsrt){
     var zxcp=document.getElementById(zxcid);
     var zxcsels=zxcp.getElementsByTagName('SELECT');
     for (zxc0=0;zxc0<zxcsels.length;zxc0++){
      zxcsels[zxc0].options[0]=new Option('Select','',true,true);
      for (zxc1=1;zxc1<50;zxc1++){
       zxcsels[zxc0].options[zxc1]=new Option(zxcFormatNu(zxc1),zxcFormatNu(zxc1),true,true);
      }
      zxcsels[zxc0].selectedIndex=0;
     }
    }
    
    function zxcFormatNu(zxcnu){
     if (zxcnu<10){ zxcnu='0'+zxcnu; }
     return zxcnu;
    }
    
    
    //-->
    </script>
    
    <script language="JavaScript" type="text/javascript">
    <!--
    // Remove Select Duplicates  f53Part1  (23-Jan-2006)
    // by Vic Phillips http://www.vicsjavascripts.org.uk
    
    // When an option from one SelectList in a group is selected
    // any other SelectList in the group options with the same text will be removed
    // reselection of another option will replace the previous option.
    
    
    // DRAFT
    
    function zxcSelInit(zxcsobj,zxcsrt){
     zxcsrt=zxcsrt||0;
     var zxcp=zxcsobj.parentNode;
     zxcp.ary=[];
     var zxcsels=zxcp.getElementsByTagName('SELECT');
     for (zxcA0=0;zxcA0<zxcsels.length;zxcA0++){
      zxcsels[zxcA0].ary=zxcp.ary;
      zxcp.ary.push(zxcsels[zxcA0]);
      zxcsels[zxcA0].last=null;
      zxcsels[zxcA0].srt=zxcsrt;
     }
     return zxcp.ary;
    }
    
    
    
    function zxcRemoveDuplicates(zxcobj,zxcsrt){
     if (typeof(zxcobj)=='string'){ zxcobj=document.getElementById(zxcobj); }
     if (!zxcobj.ary){ zxcSelInit(zxcobj,zxcsrt); }
     for (zxcB0=0;zxcB0<zxcobj.ary.length;zxcB0++){
      zxcobj.ary[zxcB0].si=zxcobj.ary[zxcB0].options[zxcobj.ary[zxcB0].selectedIndex].text;
     }
     for (zxcB1=0;zxcB1<zxcobj.ary.length;zxcB1++){
      if (zxcobj.ary[zxcB1]!=zxcobj){
       zxcFill(zxcobj.ary[zxcB1],zxcobj.si);
      }
     }
     if (zxcobj.last&&zxcobj.last!=zxcobj.options[zxcobj.selectedIndex]){
      for (zxcB2=0;zxcB2<zxcobj.ary.length;zxcB2++){
       if (zxcobj.ary[zxcB2]!=zxcobj){
        zxcobj.ary[zxcB2].options[zxcobj.ary[zxcB2].options.length]=new Option(zxcobj.last.text,zxcobj.last.value,true,true);
       }
      }
     }
     zxcobj.last=zxcobj.options[zxcobj.selectedIndex];
     for (zxcB3=0;zxcB3<zxcobj.ary.length;zxcB3++){
      zxcFill(zxcobj.ary[zxcB3],null);
      zxcobj.ary[zxcB3].selectedIndex=0;
      for (zxcB4=zxcobj.ary[zxcB3].srt;zxcB4<zxcobj.ary[zxcB3].options.length;zxcB4++){
       if (zxcobj.ary[zxcB3].options[zxcB4].text==zxcobj.ary[zxcB3].si){
        zxcobj.ary[zxcB3].selectedIndex=zxcB4;
       }
      }
     }
    }
    
    function zxcFill(zxcary,zxcm){
     var zxcoptions=zxcOptionAry(zxcary);
     zxcoption=zxcoptions.sort(zxcSortOptions);
     zxcary.options.length=zxcary.srt;
     for (zxcC0=0;zxcC0<zxcoptions.length;zxcC0++){
      if (zxcoptions[zxcC0].text!=zxcm){
       zxcary.options[zxcary.options.length]=new Option(zxcoptions[zxcC0].text,zxcoptions[zxcC0].value,true,true);
      }
     }
    }
    
    function zxcOptionAry(zxcary){
     var zxcoptions=[];
     for (zxcD0=zxcary.srt;zxcD0<zxcary.options.length;zxcD0++){
      zxcoptions.push(zxcary.options[zxcD0]);
     }
     return zxcoptions
    }
    
    function zxcSortOptions(zxca,zxcb){
     var zxcA=zxca.text;
     var zxcB=zxcb.text;
     if (zxcA<zxcB){ return -1; }
     if (zxcA>zxcB){ return +1; }
     return 0;
    }
    
    //-->
    </script>
    <script> vic=0; </script>
    <form name=Show id=Show style="position:absolute;visibility:visible;top:450px;left:0px;" >
    <input size=10 name=Show1 >
    <input size=10 name=Show2 >
    <input size=10 name=Show3 >
    <input size=10 name=Show4 >
    <input size=10 name=Show5 >
    <input size=10 name=Show6 >
    </form>
    
    
    </body>
    
    </html>

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,505
    Thanks
    3
    Thanked 501 Times in 488 Posts
    Code:
    <script language="JavaScript" type="text/javascript">
    <!--
    // Remove SelectList Duplicates  f53Part1  (24-Jan-2006)
    // by Vic Phillips http://www.vicsjavascripts.org.uk
    
    // SelectList Options ith duplicate text in a group of SelectLists
    // may be removed on an event call.
    // or
    // When an option from one SelectList in a group is selected
    // any other SelectList in the group options with the same text will be removed
    // reselection of another option will replace the previous option.
    
    // The script may be applied to as many SelectList Groups as required
    
    
    // Application Notes
    
    // All SelectList in a group must be nested in the same parent Node.
    // e.g.
    // <a >
    //  <select >
    //   <option value="0" >Tom</option>
    //   <option value="0" >Tom</option>
    //   <option value="0" >Dick</option>
    //   <option value="0" >Joe</option>
    //   <option value="0" >Harry</option>
    //   <option value="0" >Joe</option>
    //   <option value="0" >Charley</option>
    //  </select>
    //  <select >
    //   <option value="0" >Tom</option>
    //   <option value="0" >Nigel</option>
    //   <option value="0" >Joe</option>
    //   <option value="0" >Victor</option>
    //   <option value="0" >Joe</option>
    //   <option value="0" >Charley</option>
    //  </select>
    // </a>
    
    // To Remove All Duplicates with a single Event Call
    
    // The parent node must be allocated a unique ID name
    
    // The call is to function f53InitNoDuplicates('*IDName*',*FirstOption*,*Sort*);
    // where:
    // *IDName*       = the  unique ID name of the parent node.                           (string)
    // *FirstOption*  = the first option to be checked for duplicate or to be sorted.     (digit)
    // *Sort*         = (optional) true = alpha sort the options against the option text. (true or false)
    
    // To Remove All Duplicates on a onchange event
    // Each SelectList must have an onChange event call to function  f53RemoveDuplicates(this,0);
    // where:
    // parameter 0  = the unique ID name of the SelectList or the SelectList object. (digit)
    // parameter 1  = the first option to be checked for duplicate or to be sorted.  (digit)
    //                Note - options are alph sorted by default.
    
    // Note:
    // All SelectList calls in the group must have an idential parameter 1.
    // Reselection of another SelectList option will replace the previous option to the other SelectLists.
    
    // All variable, function etc. names are prefixed with 'f53' to minimise conflicts with other JavaScripts
    
    // The functional code(3.0K) is best as an external JavaScript
    
    // Tested with IE6 and Mozilla FireFox
    
    
    // Functional Code - NO NEED to Change
    
    function f53SelInit(f53sobj,f53srt){
     if (typeof(f53sobj)=='string'){ f53sobj=document.getElementById(f53sobj); }
     f53srt=f53srt||0;
     var f53p=f53sobj.parentNode;
     f53p.ary=[];
     var f53sels=f53p.getElementsByTagName('SELECT');
     for (f53A0=0;f53A0<f53sels.length;f53A0++){
      f53sels[f53A0].ary=f53p.ary;
      f53p.ary.push(f53sels[f53A0]);
      f53sels[f53A0].last=null;
      f53sels[f53A0].srt=f53srt;
     }
     return f53p;
    }
    
    function f53InitNoDuplicates(f53id,f53srt,f53sot){
     var f53obj=f53SelInit(document.getElementById(f53id).getElementsByTagName('SELECT')[0],f53srt)
     for (f53D0=0;f53D0<f53obj.ary.length;f53D0++){
      f53SelOpts(f53obj.ary[f53D0],f53obj.ary[f53D0].srt)
      if (f53sot){ f53obj.ary[f53D0].opts.sort(f53SortOptions); }
     }
     var f53srng='';
     for (f53D1=0;f53D1<f53obj.ary.length;f53D1++){
      for (f53D2=0;f53D2<f53obj.ary[f53D1].opts.length;f53D2++){
       if (!f53srng.match(f53obj.ary[f53D1].opts[f53D2][1])){
        f53srng+=f53obj.ary[f53D1].opts[f53D2][1]+',';
        f53obj.ary[f53D1].appendChild(f53obj.ary[f53D1].opts[f53D2][0]);
       }
      }
     }
    }
    
    function f53RemoveDuplicates(f53obj,f53srt){
     if (typeof(f53obj)=='string'){ f53obj=document.getElementById(f53obj); }
     if (!f53obj.ary){ f53SelInit(f53obj,f53srt); }
     if (f53obj.replace){
      for (f53B0=0;f53B0<f53obj.replace.length;f53B0++){
       f53obj.replace[f53B0][0].appendChild(f53obj.replace[f53B0][1]);
      }
     }
     f53obj.last=f53obj.options[f53obj.selectedIndex];
     for (f53B1=0;f53B1<f53obj.ary.length;f53B1++){
      f53obj.ary[f53B1].si=f53obj.ary[f53B1].options[f53obj.ary[f53B1].selectedIndex].text;
      if (f53obj.ary[f53B1]!=f53obj){
       f53SelOpts(f53obj.ary[f53B1],f53srt);
       f53obj.ary[f53B1].opts.sort(f53SortOptions);
      }
     }
     f53obj.replace=[];
     for (f53B2=0;f53B2<f53obj.ary.length;f53B2++){
      if (f53obj.ary[f53B2]!=f53obj){
       for (var f53B3=0;f53B3<f53obj.ary[f53B2].opts.length;f53B3++){
        if (f53obj.ary[f53B2].opts[f53B3][1]!=f53obj.si){
         f53obj.ary[f53B2].appendChild(f53obj.ary[f53B2].opts[f53B3][0]);
        }
        else {
         f53obj.replace.push([f53obj.ary[f53B2],f53obj.ary[f53B2].opts[f53B3][0].cloneNode(true)]);
        }
       }
      }
     }
     for (f53B3=0;f53B3<f53obj.ary.length;f53B3++){
      f53obj.ary[f53B3].selectedIndex=0;
      for (f53B4=f53obj.ary[f53B3].srt;f53B4<f53obj.ary[f53B3].options.length;f53B4++){
       if (f53obj.ary[f53B3].options[f53B4].text==f53obj.ary[f53B3].si){
        f53obj.ary[f53B3].selectedIndex=f53B4;
       }
      }
     }
    }
    
    function f53SelOpts(f53sobj,f53srt){
     f53sobj.opts=[]; f53sobj.old=[];
     for (var f53C0=f53srt;f53C0<f53sobj.options.length;f53C0++){
      f53sobj.opts.push([f53sobj.options[f53C0].cloneNode(true),f53sobj.options[f53C0].text]);
      f53sobj.old.push(f53sobj.options[f53C0]);
     }
     for (var f53C1=0;f53C1<f53sobj.old.length;f53C1++){
      f53sobj.removeChild(f53sobj.old[f53C1])
     }
    }
    
    function f53SortOptions(f53a,f53b){
     var f53A=f53a[1]; var f53B=f53b[1];
     if (f53A<f53B){ return -1; }
     if (f53A>f53B){ return +1; }
     return 0;
    }
    
    //-->
    </script>

  • #4
    Senior Coder NancyJ's Avatar
    Join Date
    Feb 2005
    Location
    Bradford, UK
    Posts
    3,172
    Thanks
    19
    Thanked 65 Times in 64 Posts
    Wow, thats some narly code. Gonna take me a while to work through it all but its up and running. Needs some work to fit my app and to get options put back when you deselect them, a little slow with the 40+ fields I've got but its a HUGE step in the right direction.
    I assume you developed this for one of your little projects and you did go to all that trouble just for little 'ol me

  • #5
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,505
    Thanks
    3
    Thanked 501 Times in 488 Posts
    and to get options put back when you deselect them,
    does this not meet requirement

    // reselection of another option will replace the previous option.
    was thinking of adding a function to restore all original options

    ume you developed this for one of your little proj
    see

    http://www.vicsjavascripts.org.uk

  • #6
    Senior Coder NancyJ's Avatar
    Join Date
    Feb 2005
    Location
    Bradford, UK
    Posts
    3,172
    Thanks
    19
    Thanked 65 Times in 64 Posts
    I've found the problem, I took the sorting out (I want them to stay in the order they are originally) and when the option went back in, it went in at the bottom and for some reason I couldnt find it.
    I'll look at modifying the search function to sort by value rather than text - they have numerical values.

  • #7
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,505
    Thanks
    3
    Thanked 501 Times in 488 Posts
    Code:
    function f53SelOpts(f53sobj,f53srt){
     f53sobj.opts=[]; f53sobj.old=[];
     var f53restore;
     if (!f53sobj.restore){ f53sobj.restore=[]; f53restore=true; }
     for (var f53C0=f53srt;f53C0<f53sobj.options.length;f53C0++){
      f53sobj.opts.push([f53sobj.options[f53C0].cloneNode(true),f53sobj.options[f53C0].text,f53sobj.options[f53C0].value]);
      if (f53restore){ f53sobj.restore.push(f53sobj.options[f53C0].cloneNode(true)); }
      f53sobj.old.push(f53sobj.options[f53C0]);
     }
     for (var f53C1=0;f53C1<f53sobj.old.length;f53C1++){
      f53sobj.removeChild(f53sobj.old[f53C1])
     }
    }
    
    function f53SortOptions(f53a,f53b){
     var f53A=f53a[2]; var f53B=f53b[2];
     if (f53A<f53B){ return -1; }
     if (f53A>f53B){ return +1; }
     return 0;
    }
    Last edited by vwphillips; 01-25-2006 at 12:44 PM.

  • #8
    Senior Coder NancyJ's Avatar
    Join Date
    Feb 2005
    Location
    Bradford, UK
    Posts
    3,172
    Thanks
    19
    Thanked 65 Times in 64 Posts
    Sorry to be a pain but I've been trying to figure this out on my own for hours.
    I have a blank entry in the drop downs with a value of -1. This entry is allowed to be used multiple times. I've tried modifying the script so that
    if (obj.options[obj.selectedIndex].value<0) then it doesnt do the removing duplicates but does do the replace part but I just cant seem to fathom it.

  • #9
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,505
    Thanks
    3
    Thanked 501 Times in 488 Posts

  • #10
    Senior Coder NancyJ's Avatar
    Join Date
    Feb 2005
    Location
    Bradford, UK
    Posts
    3,172
    Thanks
    19
    Thanked 65 Times in 64 Posts
    In your Tom, Dick and Harry example, if you have a box with Tom selected, then select Harry, Tom isnt put back into the boxes. Poor Tom is gone forever....
    Which is what happened when I tried to modify the script myself. I couldnt seem to separate the replace and remove parts of the function.
    Last edited by NancyJ; 01-26-2006 at 05:28 PM.

  • #11
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,505
    Thanks
    3
    Thanked 501 Times in 488 Posts
    try
    Code:
    function f53RemoveDuplicates(f53obj,f53srt,f53sort){
     if (!f53obj.ary){ f53SelInit(f53obj,f53srt,f53sort); }
     if (!f53obj.ary){ return; }
     if (f53obj.replace){
      for (f53B0=0;f53B0<f53obj.replace.length;f53B0++){
       f53obj.replace[f53B0][0].appendChild(f53obj.replace[f53B0][1]);
      }
     }
     f53obj.last=f53obj.options[f53obj.selectedIndex];
     for (f53B1=0;f53B1<f53obj.ary.length;f53B1++){
      f53obj.ary[f53B1].si=f53obj.ary[f53B1].options[f53obj.ary[f53B1].selectedIndex].text;
      if (f53obj.ary[f53B1]!=f53obj){
       f53SelOpts(f53obj.ary[f53B1],f53srt);
       f53obj.ary[f53B1].opts.sort(f53SortOptions);
      }
     }
     f53obj.replace=[];
     for (f53B2=0;f53B2<f53obj.ary.length;f53B2++){
      if (f53obj.ary[f53B2]!=f53obj){
       for (var f53B3=0;f53B3<f53obj.ary[f53B2].opts.length;f53B3++){
        if (f53obj.ary[f53B2].opts[f53B3][1]!=f53obj.si||f53obj.options[f53obj.selectedIndex].value.match('f53')){
         f53obj.ary[f53B2].appendChild(f53obj.ary[f53B2].opts[f53B3][0]);
        }
        else {
         f53obj.replace.push([f53obj.ary[f53B2],f53obj.ary[f53B2].opts[f53B3][0].cloneNode(true)]);
        }
       }
      }
     }
     for (f53B3=0;f53B3<f53obj.ary.length;f53B3++){
      f53obj.ary[f53B3].selectedIndex=0;
      for (f53B4=f53obj.ary[f53B3].srt;f53B4<f53obj.ary[f53B3].options.length;f53B4++){
       if (f53obj.ary[f53B3].options[f53B4].text==f53obj.ary[f53B3].si){
        f53obj.ary[f53B3].selectedIndex=f53B4;
       }
      }
     }
    }


  •  

    Posting Permissions

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