SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    Git-R-Done
    Join Date
    Nov 2001
    Posts
    1,194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Hide an option in a select box if a certain option in another box is selected

    Can someone tell me how to hide an option in a select box if one option is selected in another select box? For example, if someone selects a certain state in the State drop-down box, I want to hide an option in another select box.

    Any help would be greatly appreciated.
    John Saunders

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    By hide I guess you dont mean remove so change the option color(text) to the background color

  3. #3
    Git-R-Done
    Join Date
    Nov 2001
    Posts
    1,194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What I am wanting to do is this:

    option1
    option2
    option3

    If something is selected in the menu above it, I do not want to show option1 (or make it even possible for it to be selected).
    John Saunders

  4. #4
    Git-R-Done
    Join Date
    Nov 2001
    Posts
    1,194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Any idea why this doesn't work?

    <script language="javascript">
    function select() {
    if (document.getElementById("state").value=="AL") {
    eight.style.visibility = "hidden"
    }
    }
    </script>

    <select name="state" id="state" onchange="select()">
    <option value="Alabama">Alabama</option>
    states...
    </select>

    <div id="eight">
    something
    </div>
    John Saunders

  5. #5
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    so you do want to remove it

    and put it back later I guess

    I'll do it tomorrow if no one else picks it up

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

    <
    html>

    <
    head>
      <
    title></title>
    </
    head>
    <
    script language="JavaScript" type="text/javascript">
    <!--
    var 
    Sel2Ary=new Array('tom','dick','harry');
    var 
    Remove,optCnt,obj1,obj2;

    function 
    Select2(){
     
    obj1=document.getElementById('Sel1')
     
    Remove=obj1.options[obj1.selectedIndex].value;
     
    obj2=document.getElementById('Sel2');
     
    obj2.options.length=1;
     
    optCnt=1;
     for (
    i=0;i<Sel2Ary.length;i++){
      if (
    Sel2Ary[i]!=Remove){
       
    obj2.options[optCnt]=new Option(Sel2Ary[i],'',true,true);
       
    optCnt++;
      }
     }
     
    obj2.selectedIndex=0;
    }

    //-->
    </script>
    <body onload="Select2('start');" >

    <select id="Sel1" size="1" onchange="javascript:Select2();" >
    <option value="start" >Choise</option>
    <option value="tom" >Name 1</option>
    <option value="dick" >Name 2</option>
    <option value="harry" >Name 3</option>
    </select>
    <select id="Sel2" size="1">
    <option >Names</option>
    </select>
    </body>

    </html> 
    if you cant use the Sel1 value then another array may be needed


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
  •