如何将 HTML <select> 列表与提交按钮链接

Question

我有一个网页，其中包含一个包含 6 个选项的选择列表以及一个提交按钮。

我需要以这样的方式进行编码：当在列表中选择一个选项并单击提交按钮时，它应该打开另一个链接页面，而当选择另一个选项并单击提交按钮时，它应该打开另一个页面。

基本上我希望每个选项在单击提交按钮时打开一些链接页面。

通过谷歌搜索，我明白我必须使用 php 来实现这一点，但我没有得到相应的代码。

我不希望提交按钮仅打开 1 个特定页面。相反，我希望它打开 6 个不同的页面，对应于所选的不同选项。

代码片段：

   <div>

   <H1><FONT="TIMES ROMAN" FONT-COLOR="BLUE" > SELECT An subject:</H1>

    <select>

   <option value=""></option>
   <option value="physics">physics</option>
   <option value="chemistry">chemistry</option>
    <option value="biology">biology</option>
    <option value="maths">maths</option>
     <option value="cs">cs</option>
     <option value="electrical">electrical</option>

      </select>
      <br>

   <input class="SubmitButton" type="submit" name="SUBMITBUTTON"              value="Submit" style="font-size:20px; " />
  </div>

我还了解到，不能使用 href 标签来完成此操作，因为选项列表无法直接打开页面，需要提交按钮才能执行操作。

需要帮助来解决这个问题。

Answer 1

我认为 ts 想要根据选定的值打开多个窗口。所以这是一个例子：

<div>
    <H1>SELECT An subject:</H1>
    <form id="link">
        <select multiple="multiple">
            <option value="">Choose links</option>
            <option value="http://stackoverflow.com/">Stackoverflow</option>
            <option value="http://google.com/">Google</option>
            <option value="http://yahoo.com/">Yahoo</option>
            <option value="http://bing.com/">Bing</option>
            <option value="http://php.net/">PHP official</option>
            <option value="http://w3c.org">W3C</option>
        </select>
        <br>
        <input class="SubmitButton" type="submit" name="SUBMITBUTTON" value="Submit" style="font-size:20px; "/>
    </form>
</div>
<script src="http://code.jquery.com/jquery-3.0.0.min.js"></script>
<script>
    $('#link').on('submit', function (e) {
        e.preventDefault();
        var $form = $(this),
                $select = $form.find('select'),
                links = $select.val();
        if (links.length > 0) {
            for (i in links) {
                link = links[i];
                window.open(link);
            }
        }
    });
</script>

首先，您必须设置多个属性来选择。然后通过 jquery 你可以在新的弹出窗口中打开每个链接。请小心浏览器可能会阻止此弹出窗口。

更新如果你只想打开一个窗口，你可以使用@Anant的解决方案