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 6 of 6
  1. #1
    New Coder
    Join Date
    Mar 2005
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Multiple Duplicate Pull-Down Edits

    I found this code and incorporated into my page. It removes an option if selected in Option area 1 so it cannot be selected in Option area 2.

    <HEAD>
    <SCRIPT LANGUAGE="JavaScript">
    <!-- Begin
    var OptLstTxt = new Array;
    var OptLstVal = new Array;
    var OptLen = 0;
    function NoDupl(SelObjFrom, SelObjTo) {
    var OldToVal = SelObjTo.options[SelObjTo.selectedIndex].value;
    if (OptLen == 0) {
    OptLen = SelObjFrom.length;
    for (var i = 1; i < OptLen; i++) {
    OptLstTxt[i] = SelObjFrom.options[i].text;
    OptLstVal[i] = SelObjFrom.options[i].value;
    }
    }
    var j = 1;
    for (var i = 1; i < OptLen; i++) {
    if (OptLstVal[i] != SelObjFrom.options[SelObjFrom.selectedIndex].value) {
    if (j == SelObjTo.length) {
    SelObjTo.options[j] = new Option(OptLstTxt[i]);
    }
    else {
    SelObjTo.options[j].text = OptLstTxt[i];
    }
    SelObjTo.options[j].value = OptLstVal[i];
    if (OptLstVal[i] == OldToVal) {
    SelObjTo.selectedIndex = j;
    }
    j++;
    }
    }
    if (SelObjTo.length > j)
    SelObjTo.options[(SelObjTo.length - 1)] = null;
    }
    // End -->
    </script>

    </HEAD>

    <BODY>
    <form method="POST" name="MForm">
    Try to select the same color:
    <br>
    <select name="Color_1" onChange="NoDupl(this,document.MForm.Color_2)">
    <option selected value=''>Select your first prefered color</option>
    <option value='R'>Red</option>
    <option value='J'>Yellow</option>
    <option value='G'>Green</option>
    <option value='B'>Blue</option>
    </select>

    <select name="Color_2" onChange="NoDupl(this,document.MForm.Color_1)">
    <option selected value=''>Select Second Prefered color</option>
    <option value='R'>Red</option>
    <option value='J'>Yellow</option>
    <option value='G'>Green</option>
    <option value='B'>Blue</option>
    </select>

    </form>

    My question is: since I have three pulldowns I'm trying to keep from being duplicative, how can I modify this script to do that ? Obviously, I need to add another input section, like this:

    <select name="Color_3" onChange="NoDupl(this,document.MForm.Color_1)">
    <option selected value=''>Select Second Prefered color</option>
    <option value='R'>Red</option>
    <option value='J'>Yellow</option>
    <option value='G'>Green</option>
    <option value='B'>Blue</option>
    </select>

    But, how do I include the onChange function into section #3 ? Also, do I need to do anything to the script, like change the var i =1 to a 2 ?

    Thanks again. I'm learning tons communicating with you.

    TK Vanacoro

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,503
    Thanks
    3
    Thanked 500 Times in 487 Posts
    Try this

    PHP Code:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd"
    >

    <
    html>

    <
    head>
      <
    title></title>
    <
    script language="JavaScript" type="text/javascript">
    <!--

    var 
    sels,Add,Opt;
    var 
    SelAry=new Array();
    var 
    NoAry=new Array();

    function 
    InitNoDupliates(){
     
    sels=document.getElementsByTagName('SELECT');
     for (
    i1=0;i1<sels.length;i1++){
      if (
    sels[i1].title=='color'){
       
    sels[i1].onchange=function(){ CheckforDupliates(this); }
       
    SelAry[SelAry.length]=new Array();
       
    SelAry[SelAry.length-1][0]=sels[i1];
       for (
    i2=0;i2<sels[i1].options.length;i2++){
        
    SelAry[SelAry.length-1][i2+3]=sels[i1].options[i2].text;
       }
      }
     }
    }

    function 
    CheckforDupliates(obj){
     for (
    i3=0;i3<SelAry.length;i3++){
      if (
    SelAry[i3][0]==obj){
       
    SelAry[i3][1]=obj.options[obj.selectedIndex].text;
      }
     }
     
    NoAry=new Array();
     for (
    i1=0;i1<SelAry.length;i1++){
      if (
    SelAry[i1][1]){
       
    NoAry[NoAry.length]=SelAry[i1][1];
      }
     }
     for (
    i4=0;i4<SelAry.length;i4++){
      
    Opt=0;
      if (
    SelAry[i4][0]!=obj){
       
    SelAry[i4][0].options.length=0;
      }
      for (
    i5=3;i5<SelAry[i4].length;i5++){
       
    SelAry[i4][2]=1;
       for (
    i2=0;i2<NoAry.length;i2++){
        if (
    SelAry[i4][i5]==NoAry[i2]&&SelAry[i4][1]!=NoAry[i2]){
         
    SelAry[i4][2]=0;
        }
       }
       if (
    SelAry[i4][0]!=obj&&SelAry[i4][2]){
        
    SelAry[i4][0].options[Opt]=new Option(SelAry[i4][i5],'',true,true);
        
    Opt++;
       }
      }
      if (
    SelAry[i4][0]!=obj){
       
    SelAry[i4][0].selectedIndex=0;
      }
     }
    }


    //-->
    </script>

    </head>

    <body onload="InitNoDupliates();">

    Try to select the same color:
    <br>
    <select title="color" name="Color_1">
    <option selected value=''>Select your first prefered color</option>
    <option value='R'>Red</option>
    <option value='J'>Yellow</option>
    <option value='G'>Green</option>
    <option value='B'>Blue</option>
    </select>

    <select title="color" name="Color_2" >
    <option selected value=''>Select Second Prefered color</option>
    <option value='R'>Red</option>
    <option value='J'>Yellow</option>
    <option value='G'>Green</option>
    <option value='B'>Blue</option>
    </select>


    <select title="color" name="Color_3" >
    <option selected value=''>Select Third Prefered color</option>
    <option value='R'>Red</option>
    <option value='J'>Yellow</option>
    <option value='G'>Green</option>
    <option value='B'>Blue</option>
    </select>
    My question is: since I have three pulldowns I'm trying to keep from being duplicative, how can I modify this script to do that ? Obviously, I need to add another input section, like this:
    </body>

    </html> 

  • #3
    New Coder
    Join Date
    Mar 2005
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Looks like a winner. Let me incorporate your .js into my page and see if it works there. My page is a bit more complicated.

    Thanks for your help. I'll leave you a message to let you know.

    TK Vanacoro

  • #4
    New Coder
    Join Date
    Mar 2005
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I tried your code and the one thing I did notice is that when I pick the choice in pulldown #2, the selection in pulldown box #1 dissapears. Ditto for 3 back to 2.

    TK Vanacoro

  • #5
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,503
    Thanks
    3
    Thanked 500 Times in 487 Posts
    Thought thats what you wanted

    select red in 1 , red not available 2 or 3
    select yellow in 2 , yellow not available not available in 1 or 3
    select green in 3, green not available in 2 or 3

    works with any color in any selection

  • #6
    New Coder
    Join Date
    Mar 2005
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm not expressing myself well. I want the selection made in the first pulldown box removed as a choice from the second and third pulldown boxes (ditto for the second choice to the third), but what is selected to show in the pulldown box where it was chosen. I do want whatever value was selected in the pulldowns to show on the screen in the appropriate box.

    When I used your code, the moment I made a selection in pulldown 2, (the value in the pulldown box chosen in BOX 1 was removed from the selection) the value disappeared from the screen. I need the value selected to show on the screen.

    If it will help.....http://totwsc.org/Survey.html. If you look at the domestic ski resort section, you will see that when you pick a selection in pulldown 1, that VALUE is missing from the pulldown in #2. Whatever is selected in pulldown 1 stays on the screen. I need that to happen to all three pulldown boxes.

    Thanks again.
    Last edited by vanacoro; 04-18-2005 at 03:09 PM.


  •  

    Posting Permissions

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