08.21 今天作业完成省城区联动案例
即如下图所示案例,选择完毕后点击确定键将选择的省城区渲染到输入框中。
一、布局
这里用到fieldset标签来达到上图效果,注意要先给
<fieldset>
<legend for="">下拉选择框实现省市区三级联动</legend>
<form action="">
<label for="">您选择的是:</label>
<input type="text" class="txt">
<br>
<select name="" id="" class="prov">
<option value="">请选择省份</option>
</select>
<select name="" id="" class="city">
<option value="">请选择城市</option>
</select>
<select name="" id="" class="country">
<option value="">请选择县区</option>
</select>
<input type="button" value="确定" disabled class="btn">
</form>
</fieldset>
* {
margin: 0;
padding: 0;
}
.container {
width: 600px;
margin: 100px auto;
}
fieldset {
padding: 10px;
}
fieldset legend {
font-size: 18px;
}
fieldset .txt {
width: 200px;
}
fieldset select {
margin: 10px 0;
height: 25px;
}
fieldset .prov {
width: 100px;
}
fieldset .city {
width: 110px;
}
fieldset .country {
width: 110px;
}
fieldset .btn {
width: 50px;
}
二、逻辑
首先引入jq,接着我们需要进入一个包含省城区内容的文件,这里我引用的是一个city.js,在网上都可以搜到相关的文件。
具体内容如下图所示。
这里我们先写一个闭包,然后控制台输出一下provice
;(function ($) {
console.log(provice)
})(jQuery);
可以得到如下输出结果
所以在这里我们需要拿到每一个的name,接着把获取到的name加入到selected下。
;(function ($) {
// 获取到省份
$.each(provice,function(pidx,pitem) {
$('.prov').append("<option>" + pitem.name + "</option>");
})
})(jQuery);
然后我们就可以得到
接着我们需要根据我们选择的省份来确定当前省份的城市。这里用到change()事件,即当我们改变第一个selected(也就是省份时)。
然后改变后,我们需要获取到当前选择的这个省份的下标,从而定位到改下标对应的city。如下图所示。
另外需要注意的是,每当我们改变省份后,我们之后对应的城市和县区都需要清空。同时我们需要在全局上定义一个变量来存储当前的省下标。
具体代码如下:
var proIndex = null; // 设置当前省的下标
// 根据省份得到城市
$('.prov').change(function() {
// 改变时,清空城市
$('.city').empty();
$('.city').append("<option>请选择城市</option>")
$('.country').empty();
$('.country').append("<option>请选择县区</option>")
// $(this).get(0) 等于 $(this)[0]:相当于把一个$(this) 当前jquery对象 转化为DOM 对象,以便于使用dom的一些方法。
// console.dir($(this)[0].selectedIndex);
proIndex = $(this)[0].selectedIndex - 1;
for(var i = 0, cLen = provice[proIndex].city.length; i < cLen; i++){
// console.log(provice[nowIndex].city[i])
$('.city').append("<option>" + provice[proIndex].city[i].name + "</option>");
}
})
接着是根据所选的城市设置县区,方法同上
var cityIndex = null; // 设置当前城市的下标
// 根据城市得到县区
$('.city').change(function() {
// 清空县区
$('.country').empty();
$('.country').append("<option>请选择县区</option>")
cityIndex = $(this)[0].selectedIndex - 1;
// console.log(provice[proIndex].city[cityIndex].districtAndCounty)
for(var j = 0, coLen = provice[proIndex].city[cityIndex].districtAndCounty.length; j < coLen; j++){
$('.country').append("<option>" + provice[proIndex].city[cityIndex].districtAndCounty[j] + "</option>");
}
})
当县区也选完后,我们就可以让按钮可点击
// 选完县区后,确定按钮可以选定
$('.country').change(function () {
$('.btn').attr('disabled',false)
})
点击后,我们要找到当前选择的省城区的文本内容,拼接传入input
// 点击按钮后,获取选择框中的内容,传到input内
$('.btn').click(function() {
var prov = $('.prov').find('option:selected').text();
var city = $('.city').find('option:selected').text()
var country = $('.country').find('option:selected').text()
$('.txt').attr('value',(prov + city + country));
})