php 无需提交表单即可获取选项值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15153595/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Getting the option value without submitting a form
提问by Harsh
I want to use the user selected option value without submitting a form. Here is my HTML code
我想在不提交表单的情况下使用用户选择的选项值。这是我的 HTML 代码
Combo Box<br>
<select name="select1">
<option value="IVP" selected>IVP</option>
<option value="SURTEK">SURTEK</option>
<option value="GUITARTUNER">GUITARTUNER</option>
<option value="OTHER">OTHER</option>
</select>
I want to take the selected option value to a php variable, so that according to option value a new set of data could be displayed. Thanks
我想将选定的选项值带入一个 php 变量，以便根据选项值显示一组新数据。谢谢
回答by Naryl
as other people suggested, you should use AJAX. I'd recommend looking into javascript/Jquery examples of a AJAX call.
正如其他人建议的那样，您应该使用 AJAX。我建议查看 AJAX 调用的 javascript/Jquery 示例。
I guess you want to modify a portion of the web depending on the option the user selects, the best way to do this is have a separate PHP script that receives the selected option (captured in javascript/JQuery) and returns the new HTML you want to display.
我猜您想根据用户选择的选项修改网络的一部分，最好的方法是使用一个单独的 PHP 脚本来接收所选选项（在 javascript/JQuery 中捕获）并返回您想要的新 HTML显示。
For example in Jquery to get the selected option:
例如在 Jquery 中获取所选选项：
var selected_option_value=$("#select1 option:selected").val();
Also in Jquery to do a AJAX call, passing the value using POST:
同样在 Jquery 中进行 AJAX 调用，使用 POST 传递值：
$.post("script_that_receives_value.php", {option_value: selected_option_value},
function(data){ //this will be executed once the `script_that_receives_value.php` ends its execution, `data` contains everything said script echoed.
$("#place_where_you_want_the_new_html").html(data);
}
);
Hope this helps!
希望这可以帮助！
EDIT: let's give a bit more of detail to the example above:
编辑：让我们为上面的例子提供更多细节：
let's say you have a index.html page where you have the <select name="select1">given in your question:
假设您有一个 index.html 页面，其中包含<select name="select1">您的问题：
the first step would be to link an event when someone select one of the options, how to do this:
第一步是在有人选择其中一个选项时链接事件，如何执行此操作：
1- First way to do it:
1-第一种方法：
<select name='select1' id='select1' onchange='load_new_content()'>
This way when someone changes the selected value of the <select>list the javascript function load_new_content()will be executed. Notice I have added id='select1'to the tag, this is used to search this element in javascript/JQuery, you should always use the id attribute if you need to use that tag in javascript/JQuery.
这样，当有人更改<select>列表的选定值时，load_new_content()将执行javascript 函数。请注意，我已添加id='select1'到标签中，这用于在 javascript/JQuery 中搜索此元素，如果您需要在 javascript/JQuery 中使用该标签，则应始终使用 id 属性。
2- Second way, link the event using JQuery:
2- 第二种方式，使用 JQuery 链接事件：
To do this you should have a <script>tag inside the <head>of index.html. Inside this <script>tag you should have:
要做到这一点，你应该<script>在<head>index.html 中有一个标签。在这个<script>标签中，你应该有：
$(document).ready(function(){
// everything here will be executed once index.html has finished loading, so at the start when the user is yet to do anything.
$("#select1").change(load_new_content()); //this translates to: "when the element with id='select1' changes its value execute load_new_content() function"
});
Regardless the option you want to use you now need this load_new_content()function. It should also be declared inside the <script>tag of the <head>tag, just like the $(document).ready function.
无论您想使用哪个选项，您现在都需要此load_new_content()功能。它也应该在<script>标签的<head>标签内声明，就像 $(document).ready 函数一样。
function load_new_content(){
var selected_option_value=$("#select1 option:selected").val(); //get the value of the current selected option.
$.post("script_that_receives_value.php", {option_value: selected_option_value},
function(data){ //this will be executed once the `script_that_receives_value.php` ends its execution, `data` contains everything said script echoed.
$("#place_where_you_want_the_new_html").html(data);
alert(data); //just to see what it returns
}
);
}
Now the only thing left is this script_that_receives_value.php:
现在唯一剩下的就是script_that_receives_value.php：
<?php
$selected_option=$_POST['option_value'];
//Do what you need with this value, then echo what you want to be returned.
echo "you have selected the option with value=$selected_option";
?>
回答by Maxim Krizhanovsky
You cannot get option value in a php variable, without making an http request, since the selected value lies in the client, and php - in the server.
您无法在 php 变量中获取选项值，而不发出 http 请求，因为所选值位于客户端，而 php - 在服务器中。
You can use ajax, but it's still submitting the form. If you don't want to perform query to the server, you have to load all of the data in the client and use JavaScript to manage it
您可以使用ajax，但它仍在提交表单。如果不想向服务器执行查询，则必须在客户端加载所有数据并使用 JavaScript 进行管理
回答by Prasanth Bendra
Use AJAX, while selecting a option in dropdown trigger a jQuery function and send values to server page by AJAX
使用 AJAX，同时在下拉列表中选择一个选项会触发 jQuery 函数并通过 AJAX 将值发送到服务器页面
HTML page :
HTML 页面：
<html>
<head>
<script>
function showUser(str)
{
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form>
<select name="users" onchange="showUser(this.value)">
<option value="">Select a person:</option>
<option value="1">Peter Griffin</option>
<option value="2">Lois Griffin</option>
<option value="3">Glenn Quagmire</option>
<option value="4">Joseph Swanson</option>
</select>
</form>
<br>
<div id="txtHint"><b>Person info will be listed here.</b></div>
</body>
</html>
PHP page (getuser.php) :
PHP页面（getuser.php）：
<?php
$q=$_GET["q"];
$con = mysql_connect('localhost', 'peter', 'abc123');
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("ajax_demo", $con);
$sql="SELECT * FROM user WHERE id = '".$q."'";
$result = mysql_query($sql);
echo "<table border='1'>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Hometown</th>
<th>Job</th>
</tr>";
while($row = mysql_fetch_array($result))
{
echo "<tr>";
echo "<td>" . $row['FirstName'] . "</td>";
echo "<td>" . $row['LastName'] . "</td>";
echo "<td>" . $row['Age'] . "</td>";
echo "<td>" . $row['Hometown'] . "</td>";
echo "<td>" . $row['Job'] . "</td>";
echo "</tr>";
}
echo "</table>";
mysql_close($con);
?>
回答by Anuroop Francis
If you are looking for dynamic web content Ajax is the best option
如果您正在寻找动态网页内容，Ajax 是最佳选择
