jquery之动态级联下拉列表
============================================================================
原创作品,允许转载。转载时请务必以超链接形式标明原始出处、以及本声明。
请注明转自: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>
相关推荐
wanwanwandj 2020-05-25
阿斌Elements 2020-05-15
xiaoxiaoCNDS 2020-04-20
时光如瑾雨微凉 2019-12-28
云端漂移 2019-11-18
趣IT 2019-11-03
80447704 2019-10-19
雷潇 2019-03-26
moyazheng 2014-09-23
CXYZPH 2019-07-08
fwens 2013-08-05
廖金龙 2019-06-28
ChinaBowen 2012-12-06
无道圣教主 2012-08-19
Kindlecode 2016-05-25
chenssss 2011-12-22
shiTou工作室 2011-10-29
javamagicsun 2019-06-27