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 7 of 7
  1. #1
    God Emperor Fou-Lu's Avatar
    Join Date
    Sep 2002
    Location
    Saskatoon, Saskatchewan
    Posts
    16,994
    Thanks
    4
    Thanked 2,662 Times in 2,631 Posts

    How to remove options from a select menu when used by another...

    Uh, yeah... Kinda hard to explain in the title there. Here is what I am looking for:
    Say I have two select menus:
    <select name=1>
    <option value=1>...
    <option value=2>...
    <option value=3>...
    </select>
    <select name=2>
    <option value=1>...
    <option value=2>...
    <option value=3>...
    </select>

    How would I go abouts removing those options from the other select menu, when it is being used in the first? So, if someone selects option value=1 in select menu 1, how do I remove the option value=1 from the second menu? (So select menu 1 is set at option #1, and all thats left to choose for select menu 2 is options #2 & #3...). Oh, and if the then select # 2 from select #2, the #2 option dissappears from select menu 1. Argh, this is tough enough to explain, hopefully someone can make some sense from what I mean...

  • #2
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Is the following something like what you require?


    <SCRIPT language="javascript">
    <!--
    function del() {
    if (document.f1.list1.selectedIndex >= 0) {
    document.f1.list2.options[document.f1.list1.selectedIndex]=new Option("")
    }

    if (document.f1.list2.selectedIndex >= 0) {
    document.f1.list1.options[document.f1.list2.selectedIndex]=new Option("")
    }
    }
    // -->
    </SCRIPT>

    <center>
    <FORM name="f1">
    <SELECT name="list1" size="6" onclick="del()">
    <OPTION value="1">Item 1
    <OPTION value="2">Item 2
    <OPTION value="3">Item 3
    <OPTION value="4">Item 4
    </SELECT>

    <SELECT name="list2" size="6" onclick="del()">
    <OPTION value="1">Item 1
    <OPTION value="2">Item 2
    <OPTION value="3">Item 3
    <OPTION value="4">Item 4
    </SELECT>
    </FORM>
    </CENTER>



  • #3
    God Emperor Fou-Lu's Avatar
    Join Date
    Sep 2002
    Location
    Saskatoon, Saskatchewan
    Posts
    16,994
    Thanks
    4
    Thanked 2,662 Times in 2,631 Posts
    Something like that! But not quite. That just seems to remove it, and never replace it. What I am looking for, is a way to temperarily remove the item from the select element, and then readd it if something else is chosen:
    Code:
             --------------                 -------------
             |item1       |                |item1      | 
             |item2       |                |item2      |
             |item3       |                |item3      |
             |________|                |_______|
    So, if item 1 is selected in the first menu, it dissappears from the second. Then, if item2 is selected in the first menu, item2 disappears from the second, but item1 will reappear. Does that make sense?

  • #4
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    I understand the method but not the reasoning.

    If you have two option boxes and only want to be able to select one out of the two then why not just have one?

    Please elaborate

  • #5
    Regular Coder
    Join Date
    Jun 2002
    Location
    Depends on the time of year
    Posts
    478
    Thanks
    0
    Thanked 0 Times in 0 Posts

  • #6
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts


    <SCRIPT language="javascript">
    <!--
    function oHide() {
    List1=document.hide_me.list1.options[document.hide_me.list1.selectedIndex].value
    if(List1=="-------"||List1==0){return}
    if (document.hide_me.list1.selectedIndex >= 0) {
    document.hide_me.list2.options[document.hide_me.list1.selectedIndex]=new Option("-------")
    }
    }

    function oHide2() {
    List2=document.hide_me.list2.options[document.hide_me.list2.selectedIndex].value
    if(List2=="-------"||List2==0){return}
    if (document.hide_me.list2.selectedIndex >= 0) {
    document.hide_me.list1.options[document.hide_me.list2.selectedIndex]=new Option("-------")
    }
    }
    // -->
    </SCRIPT>

    <center>
    <table border="1" width="400"><tr><td width="60%" valign="top">
    Prevent the same option being selected in both boxes.

    </td><td align="center">
    <FORM name="hide_me" method="get" action="">
    <SELECT name="list1" size="9" style="width:65" onclick="oHide()">
    <OPTION value="1">Option 1
    <OPTION value="2">Option 2
    <OPTION value="3">Option 3
    <OPTION value="4">Option 4
    <OPTION value="5">Option 5
    <OPTION value="6">Option 6
    <OPTION value="7">Option 7
    <OPTION value="8">Option 8
    </SELECT>

    <SELECT name="list2" size="9" style="width:65" onclick="oHide2()">
    <OPTION value="1">Option 1
    <OPTION value="2">Option 2
    <OPTION value="3">Option 3
    <OPTION value="4">Option 4
    <OPTION value="5">Option 5
    <OPTION value="6">Option 6
    <OPTION value="7">Option 7
    <OPTION value="8">Option 8
    </SELECT>
    <P><input type="submit" value="ReChoose">
    </FORM>
    </td></tr></table>
    </CENTER>





  • #7
    God Emperor Fou-Lu's Avatar
    Join Date
    Sep 2002
    Location
    Saskatoon, Saskatchewan
    Posts
    16,994
    Thanks
    4
    Thanked 2,662 Times in 2,631 Posts
    Thanx Mr J and duniyadnd!

    With a little modification, I got what I needed!


  •  

    Posting Permissions

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