我有三个下拉输入字段,我想根据其他输入字段的值更改选项。我想得到第一个输入字段的值,并通过php查询发送它以获取另一个输入字段中的相关数据。
假设我有三个输入字段。我想得到第一个输入字段的值,并通过php查询将其发送到数据库以获取第二个输入字段的值。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#first-dropdown").off("change").on("change", function(){
$.ajax({
'url':"getUrl.php",
'data':{id:$("#first-dropdown").val()},
'method':'POST',
'success':function(data){
$("select#second-dropdown").empty().html(function(){
var output='<option value="">Choose value</option>';
if(!$.isEmptyObject(data.options)){
$.each(data.options, function(key, value) {
output += '<option value="'+key+'">' + value + '</option>';
});
}
return output;
});
})
})
</script>
</head>
<body>
<select id="first-dropdown">
<option value="volvo">1</option>
<option value="saab">2</option>
<option value="mercedes">3</option>
<option value="audi">4</option>
</select>
<select id="second-dropdown">
</select>
</body>
</html>
我的gerUrl.php是:
<?php
$id = $_POST['id']
echo $id;
?>
答案 0 :(得分:4)
您可以通过以下方式执行此操作,
这是您的第一个下拉列表和第二个
<select id="first-dropdown">
<option value="volvo">1</option>
<option value="saab">2</option>
<option value="mercedes">3</option>
<option value="audi">4</option>
</select>
<select id="second-dropdown">
</select>
您的JQuery代码
$("#first-dropdown").off("change").on("change", function(){
$.ajax({
'url':"getUrl.php",
'data':{id:$("#first-dropdown").val()},
'method':'POST',
'success':function(data){
$("select#second-dropdown").empty().html(function(){
var output='<option value="">Choose value</option>';
if(!$.isEmptyObject(data.options)){
$.each(data.options, function(key, value) {
output += '<option value="'+key+'">' + value + '</option>';
});
}
return output;
});
})
})
和你的php控制器代码
$id = $_POST['id']
//search for the value of second dropdown using this id and once you get ths send it back to ajax
//suppose $dropdownOPtions has all the data you got for second dropdown
$data['options'] = $dropdownOptions;
echo json_encode($data);
请告诉我如果您还需要更多信息:)