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 8 of 8
  1. #1
    New Coder
    Join Date
    Jul 2011
    Posts
    52
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Change [Select 2] options when [Select 1] option is changed

    Hello.
    I have 2 selects in a form:
    Select 1
    -food
    -drinks
    Select 2
    -hamburger
    -cheetos
    -orange juice
    -cola

    I want to do that when I choose "FOOD" in select 1, I get the options: Hamburger and cheetos, and when I pick "DRINKS" in select 1,
    select 2 will change to orngae juice and cola.

    How I can do that? (need to work in all browsers)
    Need domain? Buy Cheap Domain at Rapid Host :)

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,908
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    I hope this is not homework! Here you are:-

    Code:
    <html>
    <head>
    
    <script type = "text/javascript">
    
    function setOptions(chosen) {
    var selbox = document.getElementById("myform").opttwo;
     
    selbox.options.length = 0;
    if (chosen == "0") {
    selbox.options[selbox.options.length] = new Option('Please select one of the options above first',' ');
    }
    
    if (chosen == "1") {
    selbox.options[selbox.options.length] = new Option('Hamburger     ','Hamburger');
    selbox.options[selbox.options.length] = new Option('Cheetos','Cheetos');
    }
    
    if (chosen == "2") {
    selbox.options[selbox.options.length] = new Option('Orange Juice     ','Orange Juice');
    selbox.options[selbox.options.length] = new Option('Cola','Cola');
    }
    
    }
    
    </script>
    
    </head>
    <body>
    
    <form id="myform">
    
    <select name="optone" 
    onchange="setOptions(document.getElementById('optone').selectedIndex);">
    <option value="0" selected="selected"> Please Select </option>
    <option value="1"> Food </option>
    <option value="2"> Drink </option>
    </select>
    <br> <br>
    <select name="opttwo">
    <option value=" " selected="selected">Please select one of the options above first</option>
    </select>
    <br><br>
    <input type="button" name="go" value="Click To Alert Value Selected" onclick="alert(document.getElementById('myform').opttwo.value)">
    
    </form> 
    
    </body>
    </html>
    "I have not failed. I've just found 10,000 ways that won't work. " - Thomas Edison
    Last edited by Philip M; 11-10-2012 at 12:44 PM. Reason: Improved

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    New Coder
    Join Date
    Jul 2011
    Posts
    52
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Philip M View Post
    I hope this is not homework! Here you are:-

    Code:
    <html>
    <head>
    
    <script type = "text/javascript">
    
    function setOptions(chosen) {
    var selbox = document.myform.opttwo;
     
    selbox.options.length = 0;
    if (chosen == "0") {
    selbox.options[selbox.options.length] = new Option('Please select one of the options above first',' ');
    }
    
    if (chosen == "1") {
    selbox.options[selbox.options.length] = new Option('Hamburger     ','Hamburger');
    selbox.options[selbox.options.length] = new Option('Cheetos','Cheetos');
    }
    
    if (chosen == "2") {
    selbox.options[selbox.options.length] = new Option('Orange Juice     ','Orange Jiuce');
    selbox.options[selbox.options.length] = new Option('Cola','Cola');
    }
    
    }
    
    </script>
    
    </head>
    <body>
    
    <form name="myform">
    
    <select name="optone" 
    onchange="setOptions(document.myform.optone.options[document.myform.optone.selectedIndex].value);">
    <option value="0" selected="selected"> Please Select </option>
    <option value="1"> Food </option>
    <option value="2"> Drink </option>
    </select>
    <br> <br>
    <select name="opttwo">
    <option value=" " selected="selected">Please select one of the options above first</option>
    </select>
    <br><br>
    <input type="button" name="go" value="Click To Alert Value Selected" onclick="alert(document.myform.opttwo.options[document.myform.opttwo.selectedIndex].value);">
    
    </form> 
    
    </body>
    </html>

    "I have not failed. I've just found 10,000 ways that won't work. " - Thomas Edison
    This is not Homework lol, I just used it as example of what I want so you can understand me easier

    btw, its not helping me since I need to use PHP to loop all my options, wich is impossible to use in a javascript script.
    Help?
    Need domain? Buy Cheap Domain at Rapid Host :)

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,908
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Quote Originally Posted by topdown.me View Post
    This is not Homework lol, I just used it as example of what I want so you can understand me easier

    btw, its not helping me since I need to use PHP to loop all my options, wich is impossible to use in a javascript script.
    Help?
    Oh, sorry I spoke! I don't know much about PHP.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #5
    New Coder
    Join Date
    Jul 2011
    Posts
    52
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Need help here.
    Something that can be good for me too:
    When an option is chosen in Select 1, Select 2 shows up. when another option, Select 3 shows up, etc..
    Easier?
    Need domain? Buy Cheap Domain at Rapid Host :)

  • #6
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,908
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Quote Originally Posted by topdown.me View Post
    Need help here.
    Something that can be good for me too:
    When an option is chosen in Select 1, Select 2 shows up. when another option, Select 3 shows up, etc..
    Easier?
    Try

    http://www.javascriptkit.com/script/...plecombo.shtml

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #7
    Banned
    Join Date
    Oct 2012
    Posts
    81
    Thanks
    0
    Thanked 4 Times in 4 Posts
    The op has x-posted in another thread.

    You said it needs to work in all browsers, so you can't use javascript because it won't work in browsers that do not support javascript or have it disabled for some reason.

    If you want to guarantee it to work in all browsers then have a look at a starting point php solution in your other thread on this topic

    Change [Select 2] options when [Select 1] option is changed

    If it doesn't have to work in all browsers, then by all means use javascript

  • #8
    New Coder
    Join Date
    Jul 2011
    Posts
    52
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Philip M View Post
    Thank you, should be good.
    Edit: no, its not good.. I cant loop my options.. \:
    Last edited by topdown.me; 11-11-2012 at 08:52 AM.
    Need domain? Buy Cheap Domain at Rapid Host :)


  •  

    Posting Permissions

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