I have 2 select boxes 1 being static choices and 2 being the dynamic being populated based on the choice from one. I am using ajax with a php file that returns multiple arrays and I want to choose the array based on the choice from select 1. Below is the code.
The div with the 2 select boxes.
<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>
Here is the jquery function.
$("#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;
}
}
}
)
Here is the json data.
{"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"}
]
}
It is not feeding any data to the 2nd select box. I know its something simple I missed.
I am adding the stripped down version of entire php file with the stripped down version of the form because it is a static long form. Maybe there is something I am missing in the code.
<!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>
I finally settled on the function. Thanks to all you for your input.
$(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;
}
}
)
})
}) ;
