jquery部分:
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
//加载一级信息
jQuery.post(
"json/json-department.php",
function(data_p){
for(var i=0;i<data_p.department.length;i++){
jQuery("#department").append('<option value='+data_p.department[i].code+'>'+data_p.department[i].name+'</option>');
}
},
"json"
);
//当省改变的时候二级信息
jQuery("#department").change(function(){
jQuery("#doctor").html("");
jQuery.post(
"json/json-doctor.php",
function(data_c){
for(var j=0;j<data_c.doctor.length;j++){
var provinceNum = jQuery("#department").val();
if (provinceNum.substring(0, 2) == data_c.doctor[j].code.substring(0, 2)){ //可以用于城市邮编截取判断
jQuery("#doctor").append('<option value='+data_c.doctor[j].code+'>'+data_c.doctor[j].name+'</option>');
}
}
},
"json"
);
});
}
);
</script>
HTML部分:
<select id="department" ><option>请选择科室</option></select>
<select id="doctor" name="doctor" ><option>请选择医生</option></select>
JSON部分:
文件: json/json-doctor.php
{"doctor":[
{"name":"张三", "code":"3"},
{"name":"李四", "code":"3"},
{"name":"王武", "code":"3"},
{"name":"周六", "code":"3"},
{"name":"赵八", "code":"3"},
{"name":"钱九", "code":"2"},
{"name":"孙十", "code":"2"},
{"name":"曹操", "code":"2"},
{"name":"夏侯", "code":"1"},
{"name":"杨辉", "code":"1"},
{"name":"关羽", "code":"4"},
{"name":"董卓", "code":"4"},
{"name":"韩寒", "code":"4"}
]}
文件: json/json-department.php
{
"department":[
{"name":"产科", "code":"1"},
{"name":"妇科", "code":"2"},
{"name":"儿科", "code":"3"},
{"name":"口腔科", "code":"4"}
]
}