如何链接HTML <select>带有提交按钮的列表 - How to link a HTML <select> list with a submit button

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

我需要编码它在这样一种方式，当一个选项在列表中被选中，提交按钮被点击，它应该打开另一个链接页面，而当另一个选项被选中，提交按钮被点击，它应该打开一些另一个页面。

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

通过谷歌一点，我明白我必须使用php，但我没有得到适当的代码为相同的。

我不希望提交按钮只打开一个特定的页面。相反，我希望它打开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标签，因为选项列表不能直接打开页面，提交按钮需要执行一个动作。

需要帮助来解决这个问题

我想它要根据选定的值打开多个窗口。下面是一个例子:

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

基于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格式。我只是给了一个例子

将此脚本添加到您的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; " />

希望有帮助

你可以用PHP这样做，但是你需要做两件事:

把选择和输入放到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>

让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代码。