我有 2 个选择框，1 是静态选项，2 是根据其中一个选择填充的动态选项。我正在使用 ajax 和一个返回多个数组的 php 文件，我想根据 select 1 中的选择来选择数组。下面是代码。
带有 2 个选择框的 div。
<div>
<label for="incimechtype">Incident Mechanism Type</label>
<select name="incimechtype" id="incimechtype">
<option></option>
<option>Mechanism</option>
<option>Object</option>
<option>Other</option>
</select>
<label for="incimech">Incident Mechanism</label>
<select id="incimech">
</select>
</div>
这是 jquery 函数。
$("#incimechtype").change(function(){
var $dropdown = $(this).val();
$.ajax({
url: "getinjuryjson.php";
datatype: "json"
}).function(data){
$("#incimech").find("option").remove();
switch(dropdown){
case 'Mechanism':
$.each(data.injmech, function(key,value){
$("#incimech").append($('<option/>',{
value: value.injmechid,
text: value.injmechdescrip
}))
}
);
break;
case 'Object':
$.each(data.injobject, function(key,value){
$("#incimech").append($('<option/>',{
value: value.injobjid,
text: value.injobjdescrip
}))
}
);
break;
case 'Other':
$.each(data.injother, function(key,value){
$("#incimech").append($('<option/>',{
value: value.injotherid,
text: value.injotherdescrip
}))
}
);
break;
}
}
}
)
这是 json 数据。
{"injmech":[
{"injmechid":1,"injmechdescrip":"Allergic reaction"},
{"injmechid":2,"injmechdescrip":"Bloodborne"},
{"injmechid":3,"injmechdescrip":"Bugbite"},
{"injmechid":4,"injmechdescrip":"Chemical"},
{"injmechid":5,"injmechdescrip":"Electrical"},
{"injmechid":6,"injmechdescrip":"Employee encounter"},
{"injmechid":7,"injmechdescrip":"Fall"},
{"injmechid":8,"injmechdescrip":"Fire"},
{"injmechid":9,"injmechdescrip":"Fumes"}
],
"injobject":[
{"injobjid":1,"injobjdescrip":"Bed"},
{"injobjid":2,"injobjdescrip":"Cart"},
{"injobjid":3,"injobjdescrip":"Door"},
{"injobjid":4,"injobjdescrip":"Hoyer lift"},
{"injobjid":5,"injobjdescrip":"Maxi lift"},
{"injobjid":10,"injobjdescrip":"Other"},
{"injobjid":6,"injobjdescrip":"Sara lift"},
{"injobjid":7,"injobjdescrip":"Shower"},
{"injobjid":8,"injobjdescrip":"Table"},
{"injobjid":9,"injobjdescrip":"Wheelchair"}
],
"injother":[
{"injotherid":1,"injotherdescrip":"Patient care or tasks assigned to job"},
{"injotherid":2,"injotherdescrip":"Patient encounter"},
{"injotherid":3,"injotherdescrip":"Reoccurrence"},
{"injotherid":4,"injotherdescrip":"Unspecified-unknown"}
]
}
它没有向第二个选择框提供任何数据。 我知道我错过了一些简单的事情。
我将整个 php 文件的精简版本与表单的精简版本一起添加，因为它是静态长表单。也许代码中缺少一些东西。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="Monroe Community Hospital" />
<link rel="stylesheet" type="text/css" href="mch.css"/>
<link rel="stylesheet" type="text/css" href="empinc.css"/>
<script type="text/javascript" src="jsstuff/jquery-ui-1.10.4.custom/js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="jsstuff/jquery-ui-1.10.4.custom/js/jquery-ui-1.10.4.custom.min.js"></script>
<link rel="stylesheet" href="jsstuff/jquery-ui-1.10.4.custom/css/ui-lightness/jquery-ui-1.10.4.custom.min.css"/>
<link rel="stylesheet" href="jsstuff/timepick/wvega-timepicker-cc21378/jquery.timepicker.css"/>
<script type="text/javascript" src="jsstuff/timepick/wvega-timepicker-cc21378/jquery.timepicker.js"></script>
<script type="text/javascript">
$(function(){
var options = {
changeYear: true,
changeMonth: true
};
$(".datepick").datepicker(options);
})
</script>
<script type="text/javascript">
$("#incimechtype").change(function(){
var dropdown = $(this).val();
$.ajax({
url: "getinjuryjson.php",
datatype: "json"
}).success(function(data){
$("#incimech").find("option").remove();
switch(dropdown){
case 'Mechanism':
$.each(data.injmech, function(key,value){
$("#incimech").append($('<option/>',{
value: value.injmechid,
text: value.injmechdescrip
}));
}
);
break;
case 'Object':
$.each(data.injobject, function(key,value){
$("#incimech").append($('<option/>',{
value: value.injobjid,
text: value.injobjdescrip
}));
}
);
break;
case 'Other':
$.each(data.injother, function(key,value){
$("#incimech").append($('<option/>',{
value: value.injotherid,
text: value.injotherdescrip
}));
}
);
break;
}
}
)
});
</script>
<title>Employees</title>
</head>
<body>
<form action="/emplincidata.php" method="get">
<div class="incident">
<label class="title">TO BE COMPLETED BY EMPLOYEE HEALTH</label>
<div>
<label for="incimechtype">Incident Mechanism Type</label>
<select name="incimechtype" id="incimechtype">
<option></option>
<option>Mechanism</option>
<option>Object</option>
<option>Other</option>
</select>
<label for="incimech">Incident Mechanism</label>
<select id="incimech">
</select>
</div>
</div>
</form>
</body>
</html>
我终于选定了这个功能。感谢大家的意见。
$(function(){
$("#incimechtype").change(function(){
var dropdown = $(this).val();
$.ajax({
url:"getinjuryjson.php",
dataType: "json"
}).done( function(data){
$("#incimech").find("option").remove();
if(dropdown !== ""){
$("#incimech").append($('<option/>'));
}
switch(dropdown){
case "Mechanism":
$.each(data, function(key,value){
if(value.injmech==='Mechanism'){
$("#incimech").append($('<option/>',{
value: value.injmechid,
text: value.injmechdescrip
}));
}
});
break;
case "Other":
$.each(data, function(key,value){
if(value.injmech==='Other'){
$("#incimech").append($('<option/>',{
value: value.injmechid,
text: value.injmechdescrip
}));
}
});
break;
case "Object":
$.each(data, function(key,value){
if(value.injmech==='Object'){
$("#incimech").append($('<option/>',{
value: value.injmechid,
text: value.injmechdescrip
}));
}
});
break;
}
}
)
})
}) ;
最佳答案
您刚刚有几个拼写错误，并且没有在 ajax 函数中调用 .done() 。这为我解决了这个问题(假设你的 .php 实际上返回 JSON):
$("#incimechtype").change(function(){
var dropdown = $(this).val();
$.ajax({
url: "getinjuryjson.php",
datatype: "json"
}).done(function(data){
$("#incimech").find("option").remove();
switch(dropdown){
case 'Mechanism':
$.each(data.injmech, function(key,value){
$("#incimech").append($('<option/>',{
value: value.injmechid,
text: value.injmechdescrip
}));
}
);
break;
case 'Object':
$.each(data.injobject, function(key,value){
$("#incimech").append($('<option/>',{
value: value.injobjid,
text: value.injobjdescrip
}));
}
);
break;
case 'Other':
$.each(data.injother, function(key,value){
$("#incimech").append($('<option/>',{
value: value.injotherid,
text: value.injotherdescrip
}));
}
);
break;
}
}
)
});
Here's a Fiddle选择器和 JSON 一起工作。
关于javascript - 使用多个数组 json 来填充动态选择，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24308247/