我有一个表单
<html>
<head>
</head>
<body>
<form>
<select id="groups">
<optgroup label="GroupA">
<option value="2">[GroupA] value1</option>
<option value="11">[GroupA] value2</option>
<option value="14">[GroupA] value3</option>
<option value="15">[GroupA] value4</option>
<option value="601">[GroupA] value5</option>
<option value="21">[GroupA] value6</option>
<option value="23">[GroupA] value7</option>
<option value="24">[GroupA] value8</option>
</optgroup>
...
</select>
</form>
<br />
<div id="txtHint"><b>Show edit form here.</b></div>
</body>
</html>
当用户从下拉列表中选择值时,将出现编辑表单编辑值将使用选定值进行查询。任何人都可以帮助我用php,ajax,jquery做到这一点吗?
谢谢
嗯,也许你可以试试:
$("select#idOfYourSelectElement").change(function(){
$.ajax({
url: "ajax/myphpajax.php",
data: "acction=loadForm&selectedElement=" + $(this).val(),
async: false,
success: function(htmlWithNewForm){
$("div#txtHint").html(htmlWithNewForm);
//if the div is hidden
$("div#txtHint").css("visibility","visible");
}
});
});
要获取下拉/选择框的选定值,应该在元素周围添加,可以使用jQuery获取
,如下所示:<select id="groups">
<optgroup label="GroupA">
<option value="2">[GroupA] value1</option>
....
</optgroup>
</select>
$(function() {
$("#groups").change(function() {
var selectedValue = this.val();
});
});
嗯,有很多方法可以做到这一点。
一种方法是设置一个 url,您可以使用根据选择下拉值返回 HTML 片段的值命中该 url。
基本流程为:
Javascript代码:
$('select_id_here').change(function() {
var url = "path_here/to_something
$.ajax({
url: url,
type: "get",
data: {
"value": this.val()
}
}).done(function(html) {
$('txtHint').html(html)
});
PHP 控制器将有一个函数来处理您正在调用的 url 并根据值返回 html。如何执行此操作取决于您使用的框架。
function handle_to_something() {
$value = $_GET['value']; // horrible to use GET array
$html = render("path/to/template/$value.html");
return $html;
}