背代码
2019-03-13 本文已影响0人
向往世界的蜗牛
<body>
<div class="jilian">
<h3>三级联动</h3>
<div class="content">
<!-- 选择的容器 -->
<select name="" id="sel_p"></select>
<select name="" id="sel_c"></select>
<select name="" id="sel_a"></select>
</div>
</div>
<script src="zepto/zepto.min.js"></script>
<script>
// 一级选项
var arr_p =[
{'id':0,'text':'请选择省'},
{'id':1,'text':'广东'},
{'id':2,'text':'湖南'},
{'id':3,'text':'河北'}
];
// 二级选项
var arr_c = [
{'id':'0','p_id':0,'text':'选择省份'},
{'id':'1','p_id':1,'text':'广州'},
{'id':'2','p_id':1,'text':'佛山'},
{'id':'3','p_id':1,'text':'深圳'},
{'id':'4','p_id':2,'text':'长沙'},
{'id':'5','p_id':2,'text':'永州'},
{'id':'6','p_id':3,'text':'石家庄'},
{'id':'7','p_id':3,'text':'沧州'}
];
// 三级选项
var arr_a = [
{'id':0,'c_id':0,'text':'选择市区'},
{'id':1,'c_id':1,'text':'广州1'},
{'id':2,'c_id':1,'text':'选择市区1'},
{'id':3,'c_id':1,'text':'选择市区2'},
{'id':4,'c_id':1,'text':'选择市区3'},
{'id':5,'c_id':2,'text':'选择市区4'},
{'id':6,'c_id':2,'text':'选择市区5'},
{'id':7,'c_id':2,'text':'选择市区6'},
{'id':8,'c_id':2,'text':'选择市区7'},
{'id':10,'c_id':3,'text':'选择市区8'},
{'id':11,'c_id':3,'text':'选择市区9'},
{'id':12,'c_id':4,'text':'选择市区10'},
{'id':13,'c_id':4,'text':'选择市区11'},
{'id':14,'c_id':5,'text':'选择市区12'},
{'id':15,'c_id':5,'text':'选择市区13'}
]
</script>
<script>
// 一级列表
function general_select_p(){
var select = $('#sel_p');
var len = arr_p.length;
for(var i=0;i<len;i++){
var option = '<option value ="' + arr_p[i]['id'] + '">' + arr_p[i]['text'] + '</option>';
select.append(option);
}
}
// 二级列表
function general_select_c(p_id){
var select = $('#sel_c');
select.empty();
var len = arr_c.length;
for(var i=0;i<len;i++){
if(arr_c[i]['p_id']==p_id){
var option = '<option value="' + arr_c[i]['id'] +'">'+arr_c[i]['text'] +'</option>';
select.append(option);
}
}
}
// 三级列表
function general_select_a(c_id){
var select = $("#sel_a");
select.empty();
var len = arr_a.length;
for(var i=0;i<len;i++){
if(arr_a[i]['c_id']==c_id){
var option = '<option value="' + arr_a[i]['id'] + '">' + arr_a[i]['text'] + '</option>';
select.append(option);
}
}
}
</script>
<script>
$(document).ready(function(){
general_select_p();
general_select_c(0);
general_select_a(0);
$("#sel_p").change(function(){
var p_id = $(this).val();
general_select_c(p_id);
var c_id = $("#sel_c").val();
general_select_a(c_id);
});
$("#sel_c").change(function(){
var c_id = $(this).val();
general_select_a(c_id);
})
});
