You are here
jQuery 简单实现select二级联动 我自己亲自做的 有大用 有大大用
下面是亲自自己亲自做的 有大用 下面是html代码 <input type="hidden" name="industry_small_id" value="">
下面 js 代码 <script type="text/javascript"> $(document).ready(function(){ $(".industry_big_id_select").change(function(){ $(".industry_small_id_select").eq(0).show(); $(".industry_big_id_select option").each(function(i,o){ if($(this).prop('selected')==true) { $(".industry_small_id_select").hide(); $(".industry_small_id_select").eq(i).show(); $('#industry_small_id').val($(this).val()); } }); }); $(".industry_big_id_select").change(); $(".industry_small_id_select").change(function(){ $("[name='industry_small_id']").val($(this).val()); }); }); </script>
<!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 src="http://wlog.cn/lib/jquery/jquery-1.3.2.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $("#province").change(function(){ $("#province option").each(function(i,o){ if($(this).attr("selected")) { $(".city").hide(); $(".city").eq(i).show(); } }); }); $("#province").change(); }); </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> </body> </html>来自 http://blog.sina.com.cn/s/blog_65e5351001011a1k.html
因项目需要开发一个简单的select二级联动菜单，代码如下
演示地址：http://www.haonanwang.com/haonan/demo/select.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <title>jQuery 二级联动</title> 6 <script src="jquery-1.3.2.js" type="text/javascript"></script> 7 <script type="text/javascript"> 8 $(document).ready(function(){ 9 $("#province").change(function(){ 10 $("#province option").each(function(i,o){ 11 if($(this).attr("selected")) 12 { 13 $(".city").hide(); 14 $(".city").eq(i).show(); 15 } 16 }); 17 }); 18 $("#province").change(); 19 }); 20 </script> 21 </head> 22 <body> 23 <select id="province"> 24 <option>----请选择省份----</option> 25 <option>北京</option> 26 <option>上海</option> 27 <option>江苏</option> 28 </select> 29 <select class="city"> 30 <option>----请选择城市----</option> 31 </select> 32 <select class="city"> 33 <option>东城</option> 34 <option>西城</option> 35 <option>崇文</option> 36 <option>宣武</option> 37 <option>朝阳</option> 38 </select> 39 <select class="city"> 40 <option>黄浦</option> 41 <option>卢湾</option> 42 <option>徐汇</option> 43 <option>长宁</option> 44 <option>静安</option> 45 </select> 46 <select class="city"> 47 <option>南京</option> 48 <option>镇江</option> 49 <option>苏州</option> 50 <option>南通</option> 51 <option>扬州</option> 52 </select> 53 </body> 54 </html>
来自 http://www.cnblogs.com/58top/archive/2012/12/10/2811779.html
jquery实现一个简单的select二级联动菜单，代码如下
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>jQuery 二级联动</title>
6 <style>
7 .city{
8 display: none;;
9 }
10 .city_first {
11 display: block;
12 }
13 </style>
14 <script src="jquery/jquery-1.11.3.min.js"></script>
15 <script>
16 $(document).ready(function(){
17 $("#province").change(function(){
18 var index = $(this).get(0).selectedIndex;
19 $('.city').hide().eq(index).show();
20 });
21 });
22 </script>
23 </head>
24 <body>
25 <select id="province">
26 <option>----请选择省份----</option>
27 <option>北京</option>
28 <option>上海</option>
29 <option>江苏</option>
30 </select>
31 <select class="city city_first">
32 <option>----请选择城市----</option>
33 </select>
34
35 <select class="city">
36 <option>----请选择城市----</option>
37 <option>东城</option>
38 <option>西城</option>
39 <option>崇文</option>
40 <option>宣武</option>
41 <option>朝阳</option>
42 </select>
43 <select class="city">
44 <option>----请选择城市----</option>
45 <option>黄浦</option>
46 <option>卢湾</option>
47 <option>徐汇</option>
48 <option>长宁</option>
49 <option>静安</option>
50 </select>
51 <select class="city">
52 <option>----请选择城市----</option>
53 <option>南京</option>
54 <option>镇江</option>
55 <option>苏州</option>
56 <option>南通</option>
57 <option>扬州</option>
58 </select>
59 </body>
60 </html>
如果觉得这文章还算用心，请劳驾点击右下角的推荐，这是对我们这些做开源分享的最大的肯定，谢谢。
作者：zqifa
出处：http://www.cnblogs.com/zqifa/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接。
来自 http://www.cnblogs.com/zqifa/p/jquery-select-1.html