基于json的jquery地区联动效果代码(2)


$(function(){
//取得json对象
var jsonobj = eval('('+ area +')');
//省编号
var provcodes = jsonobj.provcodes;
//省编号数组
var provcodesArray = provcodes.split(',');
//省编号个数
var provcodesLength = provcodesArray.length;
//省名称
var provinces = jsonobj.provinces;
var provincesArray = provinces.split(',');
var provhtml = '<option value="">请选择</option>';
//绑定省份
for(var i=0;i<provcodesLength;i++){
provhtml += '<option value="'+provcodesArray[i]+'">'+provincesArray[i]+'</option>';
}
$("#province").append(provhtml);
//选择省级市加载下级
$("#province").change(function(){
var cityhtml = '<option value="">请选择</option>';
var provcode = $(this).val(); //省级的编号
//如果选择的是空则退出
if(provcode==""){
$("#city").empty().append(cityhtml);
return ;
}
var prov = "city"+provcode; //市级名称
var code = "code"+provcode; //市级编号
var provArray = jsonobj[code].split(','); //市级名称数组
var prolength = provArray.length;
var cityArray = jsonobj[prov].split(','); //市级编号数组
//绑定市级
for(var i=0;i<prolength;i++){
cityhtml += '<option value="'+provArray[i]+'">'+cityArray[i]+'</option>';
}
$("#city").empty().append(cityhtml);
});
});


完整代码:

复制代码 代码如下:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META CONTENT="EditPlus">
<META CONTENT="">
<META CONTENT="">
<META CONTENT="">
<!--
data:2011-07-1
Author:太平盛世
-->
<script src="https://www.jb51.net/jquery1.3.2.js"> </script>
<script src="https://www.jb51.net/area.js"></script>
<script>
</script>
<script>
//上面的代码贴过来即可
</script>
</HEAD>
<BODY>
地区:
<select></select>
<select>
<option value="">请选择</option>
</select>
</BODY>
</HTML>


接下来就是.NET代码数据json啦,

复制代码 代码如下:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wdfwgp.html