Question

我有一个网页，其中包含一个包含6个选项的选择列表，以及一个提交按钮。我需要以这样的方式对其进行编码：当在列表中选择一个选项并单击提交按钮时，它应该打开另一个链接页面，而当选择另一个选项并单击提交按钮时，它应该打开另一个页面。基本上我希望每个选项在单击提交按钮时打开一些链接页面。通过谷歌搜索，我明白我必须使用PHP，但我没有获得相同的相应代码。我不希望提交按钮只打开1个特定页面。相反，我希望它打开6个不同的页面，对应于所选的不同选项。代码片段：＆LT; DIV＆GT; ＆lt; H1＆gt;＆lt; FONT =“TIMES ROMAN”FONT-COLOR =“BLUE”＆gt;选择主题：＆lt; / H1＆gt; ＆LT;选择＆GT; ＆lt; option value =“”＆gt;＆lt; / option＆gt; ＆lt; option value =“physics”＆gt; physics＆lt; / option＆gt; ＆lt; option value =“chemistry”＆gt; chemistry＆lt; / option＆gt; ＆lt; option value =“biology”＆gt; biology＆lt; / option＆gt; ＆lt; option value =“maths”＆gt; maths＆lt; / option＆gt; ＆lt; option value =“cs”＆gt; cs＆lt; / option＆gt; ＆lt; option value =“electrical”＆gt; electrical＆lt; / option＆gt; ＆LT; /选择＆GT; ＆LT峰; br＆GT; ＆lt; input class =“SubmitButton”type =“submit”name =“SUBMITBUTTON”value =“Submit”style =“font-size：20px;”/＆gt; ＆LT; / DIV＆GT; 另外我已经了解到使用href标签无法完成，因为选项列表无法直接打开页面，需要提交按钮才能执行操作。需要帮助来解决这个问题。

Answer 1

基于var number_input = document.querySelector("input[type=number]#rotation"); var element // = ... var myExtraStyles // = ... // Pass in extra styles, like you width and such as above. function rotateElement(degrees, extraStyles) { var rotation = "transform: rotate(" + deg + "deg);"; element.setAttribute("style", extraStyles + rotation); } number_input.addEventListener("click", function(){ rotateElement(element.value, myExtraStyles); })的最简单解决方案： -

jquery

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

1.永远不会刷新选择框页。

2.根据选定的值，您的<div> <H1><FONT="TIMES ROMAN" FONT-COLOR="BLUE" > SELECT An subject:</H1> <select id ="dropDownId">  <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>  <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>会在新窗口中打开。

3.您还可以根据自己的要求更改URL'S格式。我刚给了一个示例。

Answer 2

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

我认为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，您可以在新弹出窗口中打开每个链接。小心浏览器可能会阻止此弹出窗口。

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

Answer 4

你可以用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抓住表单的POSTed数据并重定向到相应的页面，如下所示:(将此文件放在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代码。

如何使用提交按钮链接HTML <select>列表

4 个答案: