Question

我正在开发一个基本的webage，并尝试在选择第一个选项后有多个选择更改选项，然后它会导致不同的选项从第二次选择。选择此选项后，第三个选项依赖于用户为第二个选项卡选择的内容，然后将其带到网站。这是我有多远。我需要帮助，谢谢

       <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>

Answer 1

这样的事情会让你开始：

UPDATED jsFiddle Demo

请注意，您可以使用数组大大减少代码...推荐。

来自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);
    }
});

对于最终评估（$ dom = etc），您将确定用户选择了什么，然后访问网站：

    }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";
        }
    }

参考文献：

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

dynamic drop down box?

Answer 2

使用jquery selector.val == xx then-＆gt;做一点事（也就是在另一个输入上显示或更改所选项目）

有多个选择选项，每次更改html和javascript

2 个答案: