============================================================================
原创作品,允许转载。转载时请务必以超链接形式标明原始出处、以及本声明。
请注明转自:http://yunjianfei.iteye.com/blog/
============================================================================
在制作HTML页面的时候,难免会遇到级联下拉列表的显示。比如最常见的 “省---市” 级联下拉列表。
下面贴出来我的实现方式,供大家参考一下(用的是jquery)。
首先是运行结果:
下面是代码,可以详细看看。
<!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=utf-8" /> <title>无标题文档</title> <script src="./jquery-2.1.0.min.js"></script> <script> $.fn.extend({ parent_select_change: function(province) { $("#child_select").empty(); var parent = $("#parent_select").val(); if (parent == ''){ return false; } var cities = null; for(var i=0; i < province.length; i++) { var p = province[i]; if(p.id == parent){ cities = p.city; break; } } for(var i=0; i < cities.length; i++) { city = cities[i]; var o = new Option(city.name,city.cid); $("#child_select").append(o); } }, show_province_items: function() { var resp = [ { "id" : 1, "name" : "山西", "city" : [{ "cid" : 1, "name" : "太原", }, { "cid" : 2, "name" : "临汾", } ], }, { "id" : 2, "name" : "陕西", "city" : [{ "cid" : 3, "name" : "榆林", }, { "cid" : 4, "name" : "西安", } ], }, ]; //以上为模拟数据,可以用getJSON的方式,从服务器端取回来数据 //$.getJSON("/province", function(resp){ var html = "" var pro = resp html += "<option value=''> --请选择-- </option>" if(pro){ for(var i=0; i < pro.length; i++) { var p = pro[i]; html += "<option value='" + p.id + "'>" + p.name + "</option>" } } $("#parent_select").empty(); $("#parent_select").html(function(i,origText){ return html; }); $("#parent_select").change(function(){ $(this).parent_select_change(pro); }); //}); } }); $(document).ready(function(){ $(this).show_province_items(); }); </script> </head> <body> <center> <h1>级联列表</h1> 省:<select id='parent_select' name='province'></select> 市:<select id='child_select' name='city'></select> <br> </center> </body> </html>
相关推荐
此代码就是使用jquery简单实现级联下拉列表,
例子使用强大的ajax框架jQuery实现的级联下拉列表
select级联下拉列表 JS实多级联动下拉菜单类,简单实现省市区联动菜单! 无刷新级联下拉框的jquery代码 jQuery+HTML5实现的带链接箭头的多级下拉菜单
使用方法: $().related({ S1:"s1", S2:"s2", S3:"s3" });
JQuery写的日期级联下拉菜单 :可以直接运行,不需要部署iis 以便大家可以直接使用
两级级联下拉列表jquery插件doubleSelect.zip
使用方法: $().related({ S1:"s1", S2:"s2", S3:"s3" });
可编辑的级联下拉列表框 漂亮的可编辑的下拉列表框 巧妙的方法实现了级联 jquery实现
其中包括一个级联下拉列表的小测试,用于ajax,jquery入门学习,还有prototype.1.7.js和jquery的jar包。
用jquery实现级联下拉框效果 源代码+讲解
主要介绍了jQuery实现动态生成年月日级联下拉列表,结合具体实例形式分析了jQuery日期时间运算构造级联下拉列表相关操作技巧,需要的朋友可以参考下
jQuery ajax 通过JSON 下拉列表框级联,点击省份,级联城市,此demo是在springMVC环境下实现的,如果感兴趣可以下载我整理的springMVC.
主要介绍了jQuery ajax+PHP实现的级联下拉列表框功能,涉及php结合jQuery的$.get方法动态交互实现省市二级联动下拉列表框相关操作技巧,需要的朋友可以参考下
摘要:脚本资源,jQuery,级联菜单,全国城市菜单 美化版的jQuery全国城市级联菜单代码实例包,Select下拉框已经过美化,比传统的灰色风格Select下拉列表更美观,城市菜单信息存放在XML文件内,若城市信息有所变动,...
NULL 博文链接:https://fukaijian.iteye.com/blog/1871190