JS联动控制

最新推荐文章于 2024-07-30 10:56:44 发布

cqh520llr

最新推荐文章于 2024-07-30 10:56:44 发布

阅读量87

点赞数

分类专栏： JS联动控制文章标签： xhtml javascript ViewUI

本文链接：https://blog.csdn.net/cqh520llr/article/details/84368213

版权

JS联动控制专栏收录该内容

1 篇文章 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="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>

cqh520llr

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS联动控制

[code="java"] jQuery 二级联动 var currentShowCity=0; $(document).ready(function(){ $("#province").change(function(){ $("#province option").each(function(i,o){...
复制链接

扫一扫

专栏目录