当前位置： 移动技术网 > IT编程>开发语言>JavaScript > JQuery打造省市下拉框联动效果

JQuery打造省市下拉框联动效果

2019年03月24日  | 移动技术网IT编程  | 我要评论

做联动效果，若是用纯javascript来做，往往需要辅助页面保存需要刷新的结果集，然后渲染到原页面。考虑将需要动态刷新的内容自动拼接到前一个下拉框之后，当前一个下拉框onchange后，同级的后面的下拉框全部清除，然后重新拼接刷新的内容。用jquery实现比较容易，代码以省市联动效果为例实现。

jsp页面代码如下：

. 代码如下:


<li id="base">
<p>生源地:</p>
<label>
<select id="provincecode" name="provincecode" onchange="refreshcity()">
<option value="">全部</option>
<c:foreach items="${provinceinfolist}" var="provinceinfo">
<option value="${provinceinfo.code}">${provinceinfo.provincename}</option>
</c:foreach>
</select>
</label>
</li>


javascript代码如下：

. 代码如下:


function refreshcity(){
if($('#provincecode').find('option:selected').val() == ""){
$('#provincecode').parent().nextall('lable').remove();
return;
}
//省份名称
var provincename = $('#provincecode').find('option:selected').text();
provincename = provincename.substring(0,provincename.length-4);
// 发出json请求，查询子下拉框选项数据
$.getjson("<%=basepath%>baseinfo_getcitiesbyprovinceid", {
provicecode : $('#provincecode').val()
}, function(data) {
// 如果有子选项，则创建子下拉框
if(data != null){
// 删除下拉框父级<lable>后的所有同级<lable>
$('#provincecode').parent().nextall('lable').remove();
var childid = "city";
// 判断是否存在下一级下拉框 不存在就创建
if($('#'+childid).length == 0){
// 创建一个<li>并创建一个<select>添加到id为extra的<ul>中
$("<lable><select id='"+childid+"' name='"+childid+"' ></select></li>").appendto($('#base'));
}else{
//清空子下拉框内容
$('#' + childid).empty();
}
// 遍历json串，填充子下拉框
$.each(data.city, function(i, item) {
$('#' + childid).append(
"<option value='"+item.code+"'>" + item.nameandcode
+ "</option>");
});
}
});
}


根据省份获取市的代码如下：

. 代码如下:


public void getcitiesbyprovincecode(string provicecode, httpservletresponse response) throws jsonparseexception, jsonmappingexception, jsonexception, ioexception{
provinceinfo provinceinfo = this.provinceandcityinfoservice.getprovinceinfobyproperty("code", provicecode);
list<cityinfo> citylist = this.provinceandcityinfoservice.getcitylistbyproperty("belongprovinceid", provinceinfo.getid()+"");
// 初始化准备输出的json串
string cityjson = "";
// 遍历集合，构造json串
if (citylist.size() > 0) {
cityjson = "{\"city\":[";
// 拼接查询到的子项
for (int i = 0; i < citylist.size(); i++) {
cityinfo city = citylist.get(i);
string temp = "{\"code\":\"" + city.getcode()
+ "\",\"nameandcode\":\"" + city.getname()+"("+ city.getcode() +")"
+ "\"}";
// 如果是集合中最后一项，则拼接结束符，否则用","隔开
if (i == citylist.size() - 1) {
cityjson = cityjson + temp + "]}";
} else {
cityjson = cityjson + temp + ",";
}
}
}
// 设置输出的字符集和类型并输出json串
response.setcharacterencoding("utf-8");
response.setcontenttype("json");
response.getwriter().print(cityjson);
}

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网