如何 link HTML <select> 带有提交按钮的列表
How to link a HTML <select> list with a submit button
我有一个网页,其中包含一个包含 6 个选项的 select 列表,以及一个提交按钮。
我需要这样编码,当列表中的一个选项被 select 编辑并且点击提交按钮时,它应该打开另一个链接页面,而当另一个选项为 selected 并单击提交按钮,它应该会打开另一个页面。
基本上 我希望每个选项在单击提交按钮时打开一些链接页面。
通过谷歌搜索一下,我知道我必须为此使用 php 但我没有得到相应的代码。
我不希望提交按钮只打开 1 个特定页面。相反,我希望它打开 6 个不同的页面,对应于不同的选项 selected.
Code Snippet :
<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 标签来完成,因为选项列表不能直接打开页面,需要提交按钮才能执行操作。
需要帮助来解决这个问题。
您可以使用 PHP 执行此操作,但您需要做两件事:
将 select 并输入到您的 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...
}
}
?>
Header 重定向仅在调用之前没有 HTML 输出时才有效,因此请确保 PHP 代码块之前没有 HTML 代码.
基于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.Based 所选值 URL'S
在新的 window 中打开。
3.Also 您可以根据需要更改 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; " />
希望这对您有所帮助:)
我认为 ts 想根据 selected 值打开多个 window。
所以这里是例子:
<div>
<H1>SELECT An subject:</H1>
<form id="link">
<select multiple="multiple">
<option value="">Choose links</option>
<option value="http://whosebug.com/">Whosebug</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>
首先,您必须将多重属性设置为select。然后通过 jquery 您可以在新弹出窗口中打开每个 link。小心浏览器可能会阻止此弹出窗口。
更新
如果只想打开一个window,可以使用@Anant的解决方案
我有一个网页,其中包含一个包含 6 个选项的 select 列表,以及一个提交按钮。
我需要这样编码,当列表中的一个选项被 select 编辑并且点击提交按钮时,它应该打开另一个链接页面,而当另一个选项为 selected 并单击提交按钮,它应该会打开另一个页面。
基本上 我希望每个选项在单击提交按钮时打开一些链接页面。
通过谷歌搜索一下,我知道我必须为此使用 php 但我没有得到相应的代码。
我不希望提交按钮只打开 1 个特定页面。相反,我希望它打开 6 个不同的页面,对应于不同的选项 selected.
Code Snippet :
<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 标签来完成,因为选项列表不能直接打开页面,需要提交按钮才能执行操作。
需要帮助来解决这个问题。
您可以使用 PHP 执行此操作,但您需要做两件事:
将 select 并输入到您的 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... } } ?>
Header 重定向仅在调用之前没有 HTML 输出时才有效,因此请确保 PHP 代码块之前没有 HTML 代码.
基于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.Based 所选值 URL'S
在新的 window 中打开。
3.Also 您可以根据需要更改 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; " />
希望这对您有所帮助:)
我认为 ts 想根据 selected 值打开多个 window。 所以这里是例子:
<div>
<H1>SELECT An subject:</H1>
<form id="link">
<select multiple="multiple">
<option value="">Choose links</option>
<option value="http://whosebug.com/">Whosebug</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>
首先,您必须将多重属性设置为select。然后通过 jquery 您可以在新弹出窗口中打开每个 link。小心浏览器可能会阻止此弹出窗口。
更新 如果只想打开一个window,可以使用@Anant的解决方案