jquery二级联动(附源码)

在网站注册或者选择地区的时候经常用到二级联动,通常的做法是把数据保存在数据库,然后异步刷新读取数据。不过有时候数据量太少的情况下,就不想把那几个选项加在数据库里。所以有了这个写在html的二级联动,当然这个代码也有个缺点:不能灵活运用。因为是写在了html里的就不灵活了,但是优点就是对比读取数据库,这个更快。

js代码为:

var currentShowCity=0;
$(document).ready(function(){
   $("#province").change(function(){
	   $("#province option").each(function(i,o){
		   if($(this).attr("selected"))
		   {		 
			   $(".city").hide();
			   $(".city").eq(i).show();
			   currentShowCity=i;
		   }
	   });
   });
   $("#province").change();
});

在html里的代码为:

 <select id="province"> 
   	   <option>----请选择省份----</option> 
       <option>北京</option> 
       <option>上海</option> 
       <option>江苏</option> 
   </select> 
   <select class="city"> 
   		<option>----请选择城市----</option> 
   </select> 
   <select class="city"> 
       <option>东城</option> 
       <option>西城</option> 
       <option>崇文</option> 
       <option>宣武</option> 
       <option>朝阳</option> 
   </select>  
   <select class="city"> 
       <option>黄浦</option> 
       <option>卢湾</option> 
       <option>徐汇</option> 
       <option>长宁</option> 
       <option>静安</option> 
   </select> 
   <select class="city"> 
       <option>南京</option> 
       <option>镇江</option> 
       <option>苏州</option> 
       <option>南通</option> 
       <option>扬州</option> 
   </select> 

最后附加源码:http://pan.baidu.com/s/1hsvyRLq

jquery二级联动(附源码):等您坐沙发呢!

发表评论

表情
还能输入210个字