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

Question

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

I need to code it in such a way that when one option is selected in the list and the submit button is clicked, it should open another linked page, whereas when another option is selected and submit button is clicked it should open some another page.

基本上 我希望每个选项在单击提交按钮时打开一些链接页面。 通过谷歌搜索了一下，我知道我必须为此使用 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 标签来完成，因为选项列表不能直接打开页面，需要提交按钮才能执行操作。

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

原文由 Neha Shetty 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 的解决方案

原文由 AlmasK89 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

最简单的解决方案基于 jquery :-

 <div>

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

  <select id ="dropDownId"> <!-- give an id to select box-->

      <option value="">Select Option</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>
<script src = "//code.jquery.com/jquery-3.0.0.min.js"></script> <!-- add jquery library-->
<script type = "text/javascript">
$('.SubmitButton').click(function(){ // on submit button click

    var urldata = $('#dropDownId :selected').val(); // get the selected  option value
    window.open("http://"+urldata+".html") // open a new window. here you need to change the url according to your wish.
});

</script>

注意：- 此代码将执行以下操作：-

1.选择框页面永不刷新。

2.根据您选择的值 URL'S 在新窗口中打开。

3.您也可以根据需要更改 URL 格式。我只是举了一个示例。

原文由 Anant - Alive to die 发布，翻译遵循 CC BY-SA 3.0 许可协议