jquery之动态级联下拉列表

最新推荐文章于 2016-08-28 14:09:01 发布
最新推荐文章于 2016-08-28 14:09:01 发布
阅读量1.4k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hewusheng10/article/details/25162813
版权

jquery之动态级联下拉列表
jquery html 级联 下拉 动态 

在制作HTML页面的时候，难免会遇到级联下拉列表的显示。比如最常见的 “省---市” 级联下拉列表。

 

下面贴出来我的实现方式，供大家参考一下（用的是jquery）。

 

首先是运行结果：

 




 下面是代码，可以详细看看。

 

 

Html代码 复制代码  收藏代码
  1. <!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=utf-8" />  
  5.   <title>无标题文档</title>  
  6.   
  7.   <script src="./jquery-2.1.0.min.js"></script>  
  8.   
  9. <script>  
  10. $.fn.extend({  
  11.   parent_select_change: function(province) {  
  12.     $("#child_select").empty();  
  13.   
  14.     var parent = $("#parent_select").val();  
  15.   
  16.     if (parent == ''){  
  17.       return false;  
  18.     }  
  19.     var cities = null;  
  20.     for(var i=0; i < province.length; i++) {  
  21.       var p = province[i];  
  22.       if(p.id == parent){  
  23.         cities = p.city;  
  24.         break;  
  25.       }  
  26.     }  
  27.       
  28.     for(var i=0; i < cities.length; i++) {  
  29.       city = cities[i];  
  30.       var o = new Option(city.name,city.cid);  
  31.       $("#child_select").append(o);  
  32.     }  
  33.   },  
  34.   
  35.   show_province_items: function() {  
  36.     var resp = [  
  37.       {  
  38.         "id" : 1,  
  39.         "name" : "山西",  
  40.         "city" : [{  
  41.           "cid" : 1,  
  42.           "name" : "太原",  
  43.         }, {  
  44.           "cid" : 2,  
  45.           "name" : "临汾",  
  46.         }  
  47.         ],  
  48.       },  
  49.       {  
  50.         "id" : 2,  
  51.         "name" : "陕西",  
  52.         "city" : [{  
  53.           "cid" : 3,  
  54.           "name" : "榆林",  
  55.         }, {  
  56.           "cid" : 4,  
  57.           "name" : "西安",  
  58.         }  
  59.         ],  
  60.       },  
  61.     ];  
  62.       
  63.     //以上为模拟数据，可以用getJSON的方式，从服务器端取回来数据  
  64.     //$.getJSON("/province", function(resp){  
  65.         var html = ""  
  66.         var pro = resp  
  67.         html += "<option value=''> --请选择-- </option>"  
  68.         if(pro){  
  69.           for(var i=0; i < pro.length; i++) {  
  70.             var p = pro[i];  
  71.             html += "<option value='" + p.id + "'>" + p.name + "</option>"  
  72.           }  
  73.         }  
  74.           
  75.         $("#parent_select").empty();  
  76.         $("#parent_select").html(function(i,origText){  
  77.           return html;  
  78.         });  
  79.   
  80.         $("#parent_select").change(function(){  
  81.           $(this).parent_select_change(pro);  
  82.         });  
  83.     //});  
  84.   }  
  85. });  
  86.   
  87. $(document).ready(function(){  
  88.    $(this).show_province_items();   
  89. });  
  90. </script>  
  91.   
  92. </head>  
  93.     
  94. <body>  
  95.   <center>   
  96. 　<h1>级联列表</h1>  
  97.   省：<select id='parent_select' name='province'></select>  市：<select id='child_select' name='city'></select>  
  98.   
  99.   <br>  
  100.   </center>  
  101. </body>  
  102. </html>  
南华
关注
级联下拉列表
03-08
五句代码实现 级联下拉列表 有文档和源码，希望对大家能有帮助！
jQuery实现动态列表项交互效果
最新发布
m0_73745236的博客
07-18 192
通过上述步骤，实现了一个简洁的手风琴效果，当鼠标移入列表项时，当前项放大显示，其他项缩小隐藏。通过结合html、css和js，可以轻松实现这种动态交互效果，提升用户体验。
jQuery效果之级联下拉框
熊诗言的博客
10-27 431
HTML              JQuery实例-级联下拉框效果                                                                                 数据装载中......                                                汽车厂商:
jquery简单实现级联下拉列表
10-25
级联下拉列表是指当用户在一个下拉列表中选择某个选项时，会触发另一个或多个下拉列表的更新，以便显示与之相关的选项。这种交互方式可以提高用户体验，简化复杂的数据选择过程。 ### jQuery在级联下拉列表中的应用...
jQuery实现动态生成年月日级联下拉列表示例
11-29
在本文中，我们将深入探讨如何使用jQuery来动态生成年月日级联下拉列表。这个功能在许多网页表单中非常实用，特别是那些需要用户输入日期的场景。级联下拉列表可以提供良好的用户体验，因为它根据用户的选择自动更新...
EasyUI学习之Combobox级联下拉列表(2)
08-31
在本文中，我们将深入探讨EasyUI的Combobox级联下拉列表的实现，这是一个非常实用的功能，常用于数据筛选和信息检索。EasyUI是基于jQuery的前端框架，它提供了丰富的UI组件，使得开发者能够快速构建美观且响应式的...
jQuery ajax+PHP实现的级联下拉列表框功能示例
01-20
级联下拉列表允许用户先选择一个上级选项（如省份），然后根据所选的上级选项动态加载下级选项（如城市）。 首先，我们来看JavaScript部分，这部分主要负责处理用户交互和与服务器通信。代码中的`fun.js`文件包含了...
select级联下拉列表
06-19
select级联下拉列表 JS实多级联动下拉菜单类,简单实现省市区联动菜单! 无刷新级联下拉框的jquery代码 jQuery+HTML5实现的带链接箭头的多级下拉菜单
jQuery实现的多级级联下拉列表
03-23
例子使用强大的ajax框架jQuery实现的级联下拉列表
jquery动态下拉菜单.zip
07-04
jquery动态下拉菜单
jquery级联下拉框
jethai的博客
08-28 747
$(document).ready(function(){     //找到三个下拉框     var carnameSelect = $(".carname").children("select");     var cartypeSelect = $(".cartype").children("select");     var wheeltypeSelect = $(".wheeltype"
jquery 下拉列表级联
MENGCHIXIANZI的专栏
11-27 525
$(function () { function objInit(obj) { return $(obj).html("请选择"); } var arrData = { 厂商1: { 品牌1_1: "型号1_1_1,型号1_1_2", 品牌1_2: "型号1_2_1,型号1_2_2",
级联下拉列表框
tianjun2012的专栏
12-09 3088
还是老规矩，先来看下效果图： 图1： 图2： 图3： 图4： 这就省份等常见的级联下拉列表框的原型；下面来看看代码的构成 标题 body{ font-size: 13px; } .clsInit{ width: 435px; height: 35px; line-height:
jQuery实现级联下拉
CHBSRZF的博客
09-01 506
流量包大小 ${template.productSize!}MB 关联企业 请选择关联企业 ${enter.name}
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值