二級聯動

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jQuery 二级联动</title>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js"></script>
<script type="text/javascript">
 
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();
});
 
function getSelectValue(){
 
     
    alert("1级="+$("#province").val());
      
    $(".city").each(function(i,o){
                    
         if(i == currentShowCity){
            alert("2级="+$(".city").eq(i).val());
         }
         
   });
 
}
 
 
</script>
</head>
  
<body>
  
   <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>
 
<INPUT TYPE="button" VALUE="点我" ONCLICK="getSelectValue();">
 
</body>
</html>
posted @ 2015-04-29 17:49  我寺神经病  阅读(85)  评论(0)    收藏  举报