0

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

And i need to use $_GET on this form, so if a specific option in the second one is slected a massage shows up, and when an option is the 3rd drop down is seleted, the page redirects for example to 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

我努力解释它，我希望你明白我想说的。

谢谢你的帮助。

4

1 回答 1

2

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

    <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）。这是一个具有两个属性的对象，它们为选择 3 个选项保存 2 个数组。

所以 drop3Options['100'] 保存一个数组 ['500','501'] 并且 drop3Options['103'] 保存一个数组 ['700','701']

当您更改选择框时，它会调用适当的方法，这是通过将“onchange”属性添加到每个选择元素来完成的，它会调用查看值并相应执行操作的函数

我认为您需要做的不止于此，因此请评论更多细节，我很乐意提供帮助

于 2012-05-28T20:11:34.583 回答