二级联动jquery

最新推荐文章于 2024-08-15 16:36:09 发布

canglingyue

最新推荐文章于 2024-08-15 16:36:09 发布

阅读量366

点赞数

分类专栏： php js+jq 文章标签： php 二级联动 jquery

js+jq 同时被 2 个专栏收录

69 篇文章 0 订阅

订阅专栏

php

22 篇文章 0 订阅

订阅专栏

<!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="jquery-1.5.2.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();">

</script>

</body> 
</html>

canglingyue

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
二级联动jquery

jQuery 二级联动 var currentShowCity=0;$(document).ready(function(){ $("#province").change(function(){ $("#province option").each(function(i,o){ if($(this).attr("selected")) {
复制链接

扫一扫

专栏目录