Having multiple select options that change each time html and javascript

Question

I'm working on a basic webage and trying to have multiple select options that change once you choose the first option and then it would lead to different option to select from the second time. and once this is selected the third option relies on the what the user choose for the second tab then it would take it to a website. Here is how far i got. I need help thanks

       <html>
         <head>

        <TITLE>Environment Reference</title>
    </head>
    <body >
<center><font color="blue" size="22"><b>Environment Reference</b></font></center><hr>
         <!--options for different envirnoments-->
               <select name="envirnoment">
                              <option>develop</option>
                          <option>test</option>
                          <option>PROduce</option>

                 </select>
         <!--choosing the service for the envirnoment-->
           <select name="service" >
             <option>service</option>
              <option>HOST service</option>
           </select>

           <!--choosing the destnation domain-->
              <select name="domain">
             <option>1 </option>
             <option>2</option>
             <option>3</option>
            <option>4 </option>

           <!--creates the go button to proceed-->
              <form action="">
                <input type="button" value="GO">
                </form> 
                 </select>

Give the javascript a shot and show us how far you get. At least put in empty javascript functions with comments indicating the steps that should happen. — Jacob Mattison, Dec 19 '13 at 22:00

score 1 · Answer 1 · edited May 23 '17 at 12:03

Something like this will get you started:

UPDATED jsFiddle Demo

Note that you can greatly reduce code by using arrays... Recommended.

Code from jsFiddle:

$('select').change(function() {
    sel_el = $(this).attr('id');
    if (sel_el == 'env'){
        sel_opt = $(this).val();
        if (sel_opt == 'develop') {
            $svc.html(''); //Clear contents
            $svc.append('<option id="code">Write Code</option>');
            $svc.append('<option id="debug">Debug Code</option>');
            $svc.append('<option id="coffee">Drink Lotsa Coffee</option>');
        }else if (sel_opt == 'test'){
            $svc.html(''); //Clear contents
            $svc.append('<option id="testcode">Test Code</option>');
            $svc.append('<option id="hairpull">Pull out all remaining hair</option>');
            $svc.append('<option id="nailgun">Shoot programmer with nail gun</option>');
        }else if (sel_opt == 'PROduce'){
            $svc.html(''); //Clear contents
            $svc.append('<option id="tv">Produce for TV</option>');
            $svc.append('<option id="radio">Produce for Radio</option>');
            $svc.append('<option id="inet">Produce for Internet</option>');
        }
    }else if (sel_el == 'svc') {
        sel_opt = $(this).val();
        alert('You chose ' + sel_opt);
    }
});

For the final evaluation ( $dom = etc ) you will determine what the user has selected and then go to a website:

    }else if (sel_el == 'dom') {
        sel_opt = $(this).val();
        if (sel_opt = 'Microsoft') {
            window.location.href = "http://microsoft.com";
        }else if (sel_opt = 'Yahoo') {
            window.location.href = "http://yahoo.com";
        }
    }

References:

http://developerdan77.wordpress.com/2011/10/14/dynamically-populate-a-select-element-from-json-data-with-jquery/

dynamic drop down box?

score 0 · Answer 2 · answered Dec 19 '13 at 22:02

0

use jquery selector.val == xx then-> do something (aka display or change the selected item on another input)

answered Dec 19 '13 at 22:02

teemo

51
2
12

Having multiple select options that change each time html and javascript

2 Answers2