如何用提交按钮链接 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的解决方案

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 格式。我只是举了一个示例。

Answer 3

在您的 html 代码中添加此脚本

function showPage() {
  var sel = document.getElementById('subjects');

  var option = sel.options[sel.selectedIndex].value;

  window.open(option + ".html");
}

复制下面的html代码并替换为你的

<select id="subjects">

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

<input class="SubmitButton" type="button" value="Submit" onclick="showPage()"  style="font-size:20px; " />

希望这会有所帮助:)

Answer 4

你可以用 PHP 做到这一点，但你需要做两件事：

1. 将选择和输入放入 HTML 中的表单中，如下所示：

   <form action="" method="post">
     <select name="opt">
       <option value="1">Link 1</option>
       <option value="2">Link 2</option>
       <!-- etc -->
     </select>
     <input type="submit" name="submit">Submit</input>
   </form>
   

2. 让 PHP 捕获表单的 POST 数据并重定向到相应的页面，如下所示：（将其与表单一起放在 PHP 页面的顶部）

   <?php
   if (isset($_POST['submit']))
   {
       if (isset($_POST['opt']))
       {
           if ($_POST['opt'] == '1') { header('Location: page1.php'); }
           elseif ($_POST['opt'] == '2') { header('Location: page2.php'); }
           // etc...
       }
   }
   
   ?>
   

只有在调用之前没有 HTML 输出的情况下，标头重定向才有效，因此请确保 PHP 代码块之前没有 HTML 代码。