参见英文答案 > html submit without submit button or JavaScript 3个
我想在不提交表单的情况下使用用户选择的选项值.这是我的HTML代码
Combo Box我想你想根据用户选择的选项修改网页的一部分,最好的方法就是有一个单独的PHP脚本接收所选的选项(在javascript / jQuery中捕获)并返回你想要的新HTML显示.
例如在Jquery中获取所选选项：
var selected_option_value=$("#select1 option:selected").val();
另外在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);
}
);
希望这可以帮助！
编辑：让我们为上面的例子提供更多细节：
假设你有一个index.html页面,你的问题中给出了< select name =“select1”>：
当有人选择其中一个选项时,第一步是链接事件,如何执行此操作：
1-第一种方式：
这样,当有人更改< select>的选定值时列出javascript函数load_new_content()将被执行.注意我已经在标签中添加了id =’select1′,这用于在javascript / JQuery中搜索这个元素,如果你需要在javascript / jQuery中使用那个标签,你应该总是使用id属性.
2-第二种方式,使用JQuery链接事件：
要做到这一点,你应该有一个< 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"
});
无论您想要使用哪个选项,现在都需要此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",`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：
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";
?>
