简单的html5级联下拉菜单,什么是html5纯CSS的三级联动级联菜单

给你一个JQ的三级联动：<!doctype html><html><head><title></title><meta charset = "utf-8"/></head><style></style><body><select id="one"><option value="">请选择省份</option></select><select id="two"><option value="">请选择城市</option></select><select id="three"><option value="">请选择区域</option></select><script type="text/javascript" src="js/jquery-1.12.0.js"></script><script type="text/javascript">/*1.搭建框架2.给省份和城市绑定change事件*/$(function(){var province = [{"name" : "广东省" ,"city" : [{"name" : "广州市" ,"area" : ["越秀区","荔湾区","海珠区","天河区,白云区"]},{"name" : "深圳市" ,"area" : ["福田区","罗湖区","南山区","宝安区","龙岗区"]}]},{"name" : "浙江省" ,"city" : [{"name" : "杭州市" ,"area" : ["上城区","下城区","江干区","西湖区"]},{"name" : "丽水" ,"area" : ["莲都区","松阳县","遂昌县","云和县"]}]},{"name" : "江西省" ,"city" : [{"name" : "南昌市" ,"area" : ["东湖区","西湖区","青云谱区","湾里区"]},{"name" : "九江市" ,"area" : ["浔阳区","庐山区","瑞昌市","九江县"]},{"name" : "赣州市" ,"area" : ["章贡区","南康区","上犹县","赣县"]}]},];// 二级联动$("#two").change(function(){var one_index = $("#one option:selected").index();var two_index = $("#two option:selected").index();var three = $("#three");three.empty().append("<option>请选择区域</option>");if(two_index > 0){var area = province[one_index-1].city[two_index-1].area;for(var i = 0 ; i < area.length ; i++){three.append("<option>"+area[i]+"</option>");}}});// 一级联动$("#one").change(function(){var one_index = $("#one option:selected").index();var two = $("#two");console.log(one_index)two.empty().append("<option>请选择城市</option>");$("#three").empty().append("<option>请选择区域</option>");//清除if(one_index > 0){var city = province[one_index-1].city;console.log(province[one_index-1].city)for(var i = 0 ; i < city.length ; i++){two.append("<option>"+city[i].name+"</option>");}}});init();func

tion init(){for(var i = 0 ; i < province.length ; i++){$("#one").append("<option>"+province[i].name+"</option>");}}});</script></body></html>

阅读全文 >

简单的html5级联下拉菜单,什么是html5纯CSS的三级联动级联菜单相关推荐

extjs 点击下拉框三角形触发事件_省市县三级联动下拉框的具体实现
功能需求: ①页面中有三个下拉框选项,分别为省下拉框,市下拉框,区/县下拉框 ②选择省,则市下拉框中出现对应的该省下的市信息,选择市则区/县下拉框中出现对应的该市下面的区/县信息. 需求分析(思路) ...
html5级联菜单,h5级联下拉、分类筛选
级联下拉列表框这种常见的需求,相信大家都经常遇到,下面两种写法都曾运用在项目,测试是没问题,但代码可能不是最好的,亲如果有更好的建议,请留言给我哦-一起探讨注:数据若为省市数据,可利用省市联动的 ...
左侧栏下拉框HTML代码,html5下拉菜单代码
html5如何实现文本框下拉选项功能使用html5或者jQuery如何实现文本框下拉效果,如下图 CSS布局HTML小编今天和大家分享大神详解最好有可以使用HTML5 list 属性.list 属性 ...
Bootstrap级联下拉菜单，你肯定用得到
今天我将介绍自定义的bootstrap级联下拉菜单(你肯定用得到),主要应用场合有省市级关联菜单等等,那么就先拿这个例子来讲,当然其他场景的关联菜单也同样适用.说实话,封装好一个通用的组件还是需要花费 ...
ajax异步请求数据库实现级联下拉菜单。
ajax实现级联下拉菜单,使用Springboot实现. 思路很简单,使用ajax异步请求数据库数据即可. 文末有项目源码! 实现效果: 废话不多说,现在我们来开始实现! 第一步. 创建三张表:省.市 ...
简单的单级下拉菜单实现
这里用纯CSS实现一个简单的单级下拉菜单,鼠标划过菜单标题时显示下拉菜单. 基本思路在菜单处于光标之下时显示菜单,其余时候隐藏.这个过程首先得想到 :hover 伪类来实现,但是直接的利用伪类还不行 ...
oracle adf lov,Oracle ADF之 LOV 级联下拉菜单
ADF中的基于LOV的级联下拉菜单补充: 我们都知道ADF的List Of Values. 虽然很好用,但是对于刚刚接触ADF的人来说,也不是那么好理解的. 前几日在开发中遇到一个需要改造三级级联下拉 ...
html下拉菜单插件,简单的jQuery大型下拉菜单插件
booNavigation是一款简单的jQuery大型下拉菜单插件.通过该插件可以制作3列大型下拉菜单,并带有平滑过渡效果,以及鼠标滑过菜单项时的动画效果. 使用方法在页面中引入jquery和boo ...
html下拉菜单省对应的市,javascript基于DOM实现省市级联下拉框的方法
省市级联下拉框 var provs = { "江西省": ["南昌市", "景德镇", "九江", "鹰潭&q ...

简单的html5级联下拉菜单,什么是html5纯CSS的三级联动级联菜单

简单的html5级联下拉菜单,什么是html5纯CSS的三级联动级联菜单相关推荐

最新文章

热门文章