Question

我需要创建3个相互关联的相关下拉菜单。因此，如果选择第一个，相关数据将显示在第二个下拉列表中，当在第二个下拉列表中选择一个选项时，在第三个下拉列表中将显示一些相关数据。

我需要在此表单上使用$ _GET，因此如果选择第二个中的特定选项，则会显示按摩，当选项是第3个下拉选项时，页面会重定向到例如www。 google.com。我在第一个文件中需要两个无相关数据，所以当它们被选中时，页面会重定向到www.msn.com。

我知道它需要JavaScript，但不幸的是我现在还不知道JS。

请不要使用“this.value”将参数发送到JavaScript，因为它与我的其他代码冲突。

（我不希望页面重新加载）

类似的东西：

Drop down 1  ----------------------- drop down 2  ----------------------- drop down 3

option 1 ( redirect to msn.com)

option 2 ==========================> Option 100 ======================> Option 500
                                     Option 101                         Option 501
Option 3 (redirect to google.com)    Option 102 (message:Hello )
                                     Option 103 ======================> Option 700
                                                                        Option 701

我努力解释它，我希望你得到我想说的话。

感谢您的帮助。

Answer 1

这是一个快速而肮脏的答案......

    <html>
      <head>
        <script type='text/javascript'>
          var drop3Options = {"100":["500","501"],"103":["700","701"]};
          function drop1Change(){
            var value = document.getElementById("drop1").value;
            if(value == "msn")
              window.location.href = "http://www.msn.com";
            else if(value == "google"){
              window.location.href = "http://www.google.com";
            }                
          }
          function drop2Change(){
            var value = document.getElementById("drop2").value;
            var drop3List = document.getElementById("drop3");
            if(drop3Options[value]){
              drop3List.options.length = 0;
              for(var i = 0; i < drop3Options[value].length; i++){
                drop3List.options[i] = new Option(drop3Options[value][i],drop3Options[value][i]);
              }
            }
          }
        </script>
      </head>

      <body>
        <form method='GET' action='serverScript.php'>
          <select id='drop1' onchange='drop1Change()'>
            <option value='msn'>MSN</option>
            <option value='dr2'>DROP 2</option>
            <option value='google'>GOOGLE</option>  
          </select>

          <select id='drop2' onchange='drop2Change()'>
            <option value='100'>100</option>
            <option value='101'>101</option>
            <option value='102'>102</option>  
            <option value='103'>103</option>              
          </select>         

          <select id='drop3'>
            <option value='500'>500</option>
            <option value='501'>501</option>
          </select>
          <input type='submit' value='SUBMIT'/>
        </form>
      </body>
    </html>

显然我不知道你使用这个脚本究竟是做什么的，所以我很难做出假设并给你更好的代码，但是这将做我所理解的问题。我也不会我不知道你要发送给哪些服务器端脚本。但只需更改表单中的ACTION属性以反映服务器脚本的位置..

javascript有一个全局变量（drop3Options）。这是一个具有两个属性的对象，它们为select 3选项保存了2个数组。

所以drop3Options ['100']包含一个数组['500'，'501'] 和drop3Options ['103']包含一个数组['700'，'701']

当你更改一个选择框时，它调用适当的方法，这是通过向每个select元素添加“onchange”属性来完成的，它调用查看值的函数并做相应的事情

我认为你需要做的不仅仅是这个，所以评论更具体，我很乐意帮助

创建3个相互关联的下拉菜单

1 个答案: