前端之家收集整理的这篇文章主要介绍了
ajax三级联动，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
<script type="text/javascript">
//进入页面自动加载省级列表
$(function (){
// alert("123")
$.ajax({
url:"selectAction_selectSheng.action",type:"post",data:"",dataType:"json",success:function(str){
var strHTML='<option value="-1">-请选择-</option>';
for (var i = 0; i < str.length; i++) {
strHTML+='<option value="'+str[i].id+'">'+str[i].full_name+'</option>';
}
$("#s1").html(strHTML);
},error:function(){
alert("系统错误");
}
})
})
//省级改变，触发市级显示
$("#s1").change(function (){
$.ajax({
url:"selectAction_selectShi.action",data:{'shengID':$(this).val()},//【重点：这里动态把父级id传到后台，以键值对的方式传值】【data可以键值对传值！！！】
dataType:"json",success:function(str){
alert("进入市ajax")
var strHTML='<option value="-1">-请选择-</option>';
for (var i = 0; i < str.length; i++) {
strHTML+='<option value="'+str[i].id+'">'+str[i].full_name+'</option>';
}
$("#s2").html(strHTML);
$("#s3").html("<option value='-1'>-请选择-</option>");
},error:function(){
alert("系统错误");
}
})
})
//市级改变，触发县
$("#s2").change(function (){
$.ajax({
url:"selectAction_selectXian.action",data:{'shiID':$(this).val()},success:function(str){
alert("进入市ajax")
var strHTML='<option value="-1">-请选择-</option>';
for (var i = 0; i < str.length; i++) {
strHTML+='<option value="'+str[i].id+'">'+str[i].full_name+'</option>';
}
$("#s3").html(strHTML);
},error:function(){
alert("系统错误");
}
})
})
</script>
<div id="d1">
<select name="shengID" id="s1"></select>
<select name="shiID" id="s2"></select>
<select name="xianID" id="s3"></select>
</div>
