首页>>焦点图>>jQuery 二级联动 非ajax 优点是结构非常简单(2014-07-09)

jQuery 二级联动 非ajax 优点是结构非常简单

jQuery 二级联动 非ajax 优点是结构非常简单
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <select id="province">   
  2.        <option>----请选择省份----</option>   
  3.        <option>北京</option>   
  4.        <option>上海</option>   
  5.        <option>江苏</option>   
  6.    </select>   
  7.    <select class="city">   
  8.         <option>----请选择城市----</option>   
  9.    </select>   
  10.    <select class="city">   
  11.        <option>东城</option>   
  12.        <option>西城</option>   
  13.        <option>崇文</option>   
  14.        <option>宣武</option>   
  15.        <option>朝阳</option>   
  16.    </select>    
  17.    <select class="city">   
  18.        <option>黄浦</option>   
  19.        <option>卢湾</option>   
  20.        <option>徐汇</option>   
  21.        <option>长宁</option>   
  22.        <option>静安</option>   
  23.    </select>   
  24.    <select class="city">   
  25.        <option>南京</option>   
  26.        <option>镇江</option>   
  27.        <option>苏州</option>   
  28.        <option>南通</option>   
  29.        <option>扬州</option>   
  30.    </select>   

 

JavaScript Code
  1. <script type="text/javascript">   
  2.   
  3. var currentShowCity=0;  
  4.   
  5. $(document).ready(function(){  
  6.    $("#province").change(function(){  
  7.        $("#province option").each(function(i,o){  
  8.            if($(this).attr("selected"))  
  9.            {  
  10.            
  11.                $(".city").hide();  
  12.                $(".city").eq(i).show();  
  13.                currentShowCity=i;  
  14.            }  
  15.        });  
  16.    });  
  17.    $("#province").change();  
  18. });  
  19.   
  20. function getSelectValue(){  
  21.   
  22.       
  23.     alert("1级="+$("#province").val());  
  24.        
  25.     $(".city").each(function(i,o){  
  26.                      
  27.          if(i == currentShowCity){  
  28.             alert("2级="+$(".city").eq(i).val());  
  29.          }  
  30.           
  31.    });  
  32.   
  33. }  
  34.   
  35.   
  36. </script>   

 


原文地址:http://www.freejs.net/article_jiaodiantu_374.html