<!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> </head> <body> <FORM METHOD=POST ACTION="" name="form1"> <SELECT NAME="province" onChange="getCity()" id="province"></SELECT> <SELECT NAME="city" id="city"></SELECT> </FORM> <script type="text/javascript"> var zNodes =[ { pId:1, name:"北京",child:[{cId:10,cName:"北京00"},{cId:11,cName:"北京1"},{cId:12,cName:"北京02"},{cId:13,cName:"北京03"}]}, { pId:2, name:"河北",child:[{cId:20,cName:"河北1"},{cId:21,cName:"北京1"},{cId:22,cName:"北京02"},{cId:23,cName:"北京03"}]}, ]; var sltProvince=document.form1.province; function init(){ for(var i=0;i<zNodes.length;i++) { var objOption=document.createElement("OPTION"); objOption.value=zNodes[i].pId; objOption.text=zNodes[i].name; document.getElementById("province").appendChild(objOption); } var i_objOption1=document.createElement("OPTION"); i_objOption1.value=zNodes[0].child[0].cId; i_objOption1.text=zNodes[0].child[0].cName; document.getElementById("city").appendChild(i_objOption1); } init(); function getCity(){ var sltCity=document.form1.city; var j=sltProvince.selectedIndex; document.getElementById("city").innerHTML=""; for(var m=0;m<zNodes[j].child.length;m++){ //alert(objOption1); var objOption1=document.createElement("OPTION"); objOption1.value=zNodes[j].child[m].cId; objOption1.text=zNodes[j].child[m].cName; document.getElementById("city").appendChild(objOption1); } } </script> </body> </html>
相关推荐
1. 什么是级联列表? 2. 级联列表有什么用? 3. 怎么实现相应的操作? 4. 两种方法实现对应省市的下拉操作 一、什么是级联? 1.级联还指用来设计一对多关系。举个例子:一个表存放学生的信息:表A(姓名,性别,年龄...
Dom查找_表单验证01_ 点击链接_添加一个div _表单验证02 _创建节点_ Html dom中的select, option_ 级联下拉列表;
对于刚刚上手的新人来说是一篇很好的文档 适合刚入门的程序员
html级联菜单,可以看看!
利用javascript+json实现级联查询
这是js控制的html网页的级联菜单,与数据库相连,从数据库中读取内容。
html+js实现地区三级联动下拉菜单代码和示例(无数据库,且包括中国所有地区),运行效率非常高,可以在所有的web程序中应用,非常方便,这是我自己开发的,希望大家能够喜欢。
纯JS+HTML写的checkBox Tree 级联选中 好用无BUG 1 选上级,自动选下级 2 选下级,自动选上级 在网上找的其他例子,都有BUG,本程程序绝对可用,放心下载!
下拉级联框下拉级联框下拉级联框下拉级联框下拉级联框下拉级联框下拉级联框下拉级联框下拉级联框下拉级联框下拉级联框
用jquery实现级联下拉框效果 源代码+讲解
HTML 省市级联代码 可供参考,如有需要请下载,或者直接与我联系!
jQuery+div实现级联省份-城市查询,该实例包含jsp+js+css,所有代码为本人亲自编写,如有疑问请联系本人
select级联下拉列表 JS实多级联动下拉菜单类,简单实现省市区联动菜单! 无刷新级联下拉框的jquery代码 jQuery+HTML5实现的带链接箭头的多级下拉菜单
自己在二级基础上修改的,亲测可用,欢迎下载!
超漂亮的基于jquery的H5省市区县三级地区级联选择菜单,适合wap、html5页面使用。无用代码全部剥离干净。界面漂亮、兼容性好。
异步的级联菜单实现了无级限制的下拉菜单,通过更改部分代码可以实现不同菜单的级联。本示例需要后台配合数据的传送。请注意示例的AjaxMultiMenu.html页面源代码注释。
此为在基于Bootstrap开发的Tree View上,又加了级联选择的功能。 级联选择这一块的代码在 index.html 和 js/bootstrap-treeview-util.js 文件中。
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 ...
适合用网站开发的动态级联效果 商业开发 适用
该实例为本人项目中使用的模块代码,经过专业测试人员测试,兼容所有主流浏览器,如有不解之处请联系本人