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

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

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

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

通过googling了一下，我明白我必须使用PHP，但我没有得到适当的代码。

我不希望提交按钮只能打开1个特定页面。相反，我希望它打开对应于所选不同选项的6个不同页面。如何链接HTML <select>列表与提交按钮

代码段：

<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标记来完成。

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

来源

2016-06-28 Neha Shetty

你应该把它们放在一个表单中。 – Ajay

是的，我想链接的页面在下一个窗口中打开。 –

根据收到的回复将您的表单重新导向到相应的页面 – zakhefron

我想希望根据选定的值打开多个窗口。所以这里是例子：

<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 如果你想打开只是一个窗口，你可以用@阿南特的解决方案

来源

2016-06-28 06:22:30 AlmasK89

这两个代码的工作！ tysm！ :) –

不客气 – AlmasK89

你可以用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代码。

来源

2016-06-28 05:51:02

以这种方式进入下一页后，他的选择页面将消失。她想要的是在不影响选择页面的情况下在新窗口中打开新页面。 –

简单的解决方案基于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.Select框页面刷新永远。

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

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

来源

2016-06-28 05:57:08

简单和完美的答案... –

@HarshSanghani谢谢。:) –

谢谢你这么多的帮助！ :) @Anant –

在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; " />

希望这有助于:)

来源

2016-06-28 06:05:59

<script type="text/javascript"> 
function configureDropDownLists(ddl1,ddl2) { 
var goa = ['GOA ASF', 'Goa LPG Plant', ]; 
var maharashtra = ['AKOLA IRD', 'AURANGABAD LPG PLANT','WADALA I TERMINAL']; 
var rajasthan = ['AJMER LPG PLANT ','AJMER TERMINAL','UDAIPUR RRO']; 
var gujrat = ['AHMEDABAD NWZ LPG ', 'AHMEDABAD NWZ RETAIL','VADODARA IRD ']; 
var madhyapradesh =['BAKANIA RIL', 'BHOPAL DSRO', 'BHOPAL RRO']; 

switch (ddl1.value) { 
    case 'Goa': 
     ddl2.options.length = 0; 
     for (i = 0; i < goa.length; i++) { 
      createOption(ddl2, goa[i], goa[i]); 
     } 
     break; 
    case 'Maharashtra': 
     ddl2.options.length = 0; 
    for (i = 0; i < maharashtra.length; i++) { 
     createOption(ddl2, maharashtra[i], maharashtra[i]); 
     } 
     break; 
    case 'Rajasthan': 
     ddl2.options.length = 0; 
     for (i = 0; i < rajasthan.length; i++) { 
      createOption(ddl2, rajasthan[i], rajasthan[i]); 
     } 
     break; 
    case 'Gujrat': 
     ddl2.options.length = 0; 
     for (i = 0; i < gujrat.length; i++) { 
      createOption(ddl2, gujrat[i], gujrat[i]); 
     } 
     break; 
    case 'MadhyaPradesh': 
     ddl2.options.length = 0; 
     for (i = 0; i < madhyapradesh.length; i++) { 
      createOption(ddl2, madhyapradesh[i], madhyapradesh[i]); 
     } 
     break; 
     default: 
      ddl2.options.length = 0; 
     break; 
}

}

function createOption(ddl, text, value) { 
    var opt = document.createElement('option'); 
    opt.value = value; 
    opt.text = text; 
    ddl.options.add(opt); 
} 
</script> 
</HEAD> 

<BODY> 

<br> 
<div> 
<H1><FONT="TIMES ROMAN" FONT-COLOR="BLUE" > SELECT A STATE:</H1> 

    <select id="ddl" onchange="configureDropDownLists(this,document.getElementById('ddl2'))"> 
<option value=""></option> 
<option value="Goa">Goa</option> 
<option value="Maharashtra">Maharashtra</option> 
<option value="Rajasthan">Rajasthan</option> 
<option value="Gujrat">Gujrat</option> 
<option value="MadhyaPradesh">MadhyaPradesh</option> 
</select> 

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

喜！另外我有一个依赖下拉列表。其中第一个列表包含5个状态，第二个列表包含该位置内的城市。我已经使用上面显示的脚本来链接两个下拉列表。我可以用第二个依赖下拉列表以同样的方式链接提交按钮吗？如果是，我应该使用什么代码，因为第二个列表不在选择标记其上面的脚本中：

来源

2016-06-28 07:17:24

@ALmask请告诉我，如果你可以帮我这个也 –

@Anant这是一个问题。 –

是的，我只是想问我该如何应用代码在您的答案这个下拉列表 –

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

回答

相关问题