在不提交表单的情况下获取选项值 [英] Getting the option value without submitting a form
问题描述
我想使用用户选择的选项值而不提交表单.这是我的HTML代码
I want to use the user selected option value without submitting a form. Here is my HTML code
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>
我想将所选的选项值带到一个php变量中，以便根据选项值可以显示一组新的数据. 谢谢
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
推荐答案
，正如其他人建议的那样，您应该使用AJAX.我建议研究一下AJAX调用的javascript/Jquery示例.
as other people suggested, you should use AJAX. I'd recommend looking into javascript/Jquery examples of a AJAX call.
我猜您想根据用户选择的选项来修改网络的一部分，最好的方法是使用一个单独的PHP脚本来接收所选的选项(捕获在javascript/JQuery中)并返回新的您要显示的HTML.
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.
例如在Jquery中以获取所选选项:
For example in Jquery to get the selected option:
var selected_option_value=$("#select1 option:selected").val();
还可以在Jquery中进行AJAX调用，并使用POST传递值:
Also in Jquery to do a AJAX call, passing the value using 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);
}
);
希望这会有所帮助！
让我们对上面的示例进行更多详细说明:
let's give a bit more of detail to the example above:
假设您有一个index.html页面，您在其中输入<select name="select1">:
let's say you have a index.html page where you have the <select name="select1">given in your question:
第一步是当某人选择一个选项时链接一个事件，该怎么做:
the first step would be to link an event when someone select one of the options, how to do this:
1-第一种方法:
<select name='select1' id='select1' onchange='load_new_content()'>
这样，当某人更改<select>列表的选定值时，将执行javascript函数load_new_content().注意，我已经在标签中添加了id='select1'，用于在javascript/JQuery中搜索该元素，如果需要在javascript/JQuery中使用该标签，则应始终使用id属性.
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.
2-第二种方法，使用JQuery链接事件:
2- Second way, link the event using JQuery:
为此，您应该在index.html的<head>内有一个<script>标记.在此<script>标记内，您应该具有:
To do this you should have a <script> tag inside the <head> of index.html. Inside this <script> tag you should have:
$(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"
});
无论您要使用的选项如何，现在都需要此load_new_content()功能.也应该在<head>标记的<script>标记内声明它，就像$(document).ready函数一样.
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.
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
}
);
}
现在唯一剩下的就是这个script_that_receives_value.php:
Now the only thing left is this 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";
?>
这篇关于在不提交表单的情况下获取选项值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
