html5级联菜单,h5级联下拉、分类筛选
级联下拉列表框这种常见的需求,相信大家都经常遇到,下面两种写法都曾运用在项目,测试是没问题,但代码可能不是最好的,亲如果有更好的建议,请留言给我哦~一起探讨
注:数据若为 省市 数据,可利用省市联动的特殊性(如省市县的国标编码,按每2位直接切断判断),但这里不做讨论,亲们有兴趣可以查阅相关资料
第一种:强调复用性
采用jQuery
利用class作为识别符,将级联下拉列表框选出来。
当选项发生变化的时候,调用Ajax,访问对应的数据文件(.txt)。然后,将数据文件解析后的数据加入到下一个下拉列表框,以此类推,所有的下拉列表框都可以做到级联。
数据采用txt
对于相对固定的数据可以采用txt来作为数据源,每次发布的时候都无需重新启动服务器。但是对于数据源为动态源的情况,需要访问数据库。这时候只要修改对应的ajax访问URL即可。
** 结论:采用高度抽象以后,每增加一个下拉列表框只需要2行即可,1行用来声明下拉列表框,另一行用来定义下一个响应的下拉列表框ID。**
为了本文的可读性,这里给出关键的代码,需要全部代码的可以拉到最下面查看复制
js
$(document).ready(function(){
$(".cascade_drop_down").change(
function () {
var name = $(this).attr("name") + "_next";
var next = $("#" + name).val();
if (next == null || next == '') {
return;
}
$("#" + next).empty();
$.ajax({
type:'post',
url: $(this).val() + '.txt',
data:'name=' + name + '&val=' + $(this).val(),
dataType:'text',
success:function(msg){
ops = msg.split("\n");
for (i = 0; i < ops.length; i++) {
$("#" + next).append(ops[i]);
}
},
error:function(){
alert("failed.");
}
});
}
)
});
html
北京
天津
上海
第二种: html5分类筛选、级联下拉
WechatIMG95.jpeg
1、数据采用json
对于相对固定的数据可以采用json来作为数据源,每次发布的时候都无需重新启动服务器。但是对于数据源为动态源的情况,需要访问数据库。这时候只要修改数据路径
2、每个事件独立,通过事件委托解决动态添加的子集也拥有对应的事件
代码对类名的依赖性比较强,理解起来相对简单,使用时可以根据需求更改完善
html5级联菜单,h5级联下拉、分类筛选相关推荐
- html5三级下拉菜单,Bootstrap多级下拉菜单插件
bootstrap-submenu是一款在原生bootstrap Dropdowns组件的基础上进行扩展,可以生成多级子菜单的多级下拉菜单插件. 原生的bootstrap下拉菜单只有一层,通过boot ...
- 仿QQ多级折叠、展开菜单,三级下拉导航
仿QQ多级折叠.展开菜单,三级下拉导航 仿QQ面板风格的多级折叠.展开菜单,三级下拉导航,JavaScript+CSS共同结晶的结果,推荐给大家,点击"运行"可查看效果. http ...
- HTML使用无序列表制作一级菜单和二级下拉菜单
在日常的生活中,想必大家都接触过下拉菜单的使用,这样为我们提供了极大的方便,那么下面看一下如何来制作吧. one: <!DOCTYPE html> <html lang=" ...
- html下拉自动加载更多,H5页面下拉加载更多(实用版)
近期在做一个H5网站,需要下拉加载更多产品列表的功能.百度搜索了好久,什么说法都有,什么插件都有. 醉了.基本上每一个能直接拿来用的. 最后发现: 1.dropload.js 插件 还可以,但是 ...
- 各种下拉菜单 ,多级下拉菜单,向上展开菜单 左侧展开菜单
各种下拉菜单 ,多级下拉菜单,向上展开菜单 左侧展开菜单 演示 XML/HTML Code <ul id="idmenu"> <li><a href= ...
- html 联想下拉菜单,这种Excel下拉菜单你见过吗?具有联想动态下拉菜单
之前有教过大家在Excel中制作下拉菜单功能,下拉菜单功能可以帮助我们在工作中快速的选择内容,而不需要我们手动输入,大大的节省了我们录入内容的时间.不过除了下拉菜单之外,其实,Excel还可以制作出& ...
- 使用HTML5和JS实现日期下拉框功能
使用HTML5和JS实现日期下拉框功能 如图所示: 代码如下: <center><span style="font-size:26pt;color:red;"&g ...
- vue element-ui级联选择器选中后下拉框自动收起
Cascader 级联选择器 数据渲染 通过 :options="options" 映射,让每一级都可以选择(选项前会有圆圈可勾选)设置属性 :props="{ chec ...
- 微信 html5禁止拖拽,js实现微信禁止h5网页下拉,禁止微信内置浏览器下拉网页...
大家可能会遇到开发公众号的时候,下来会出来源地址,下面的代码可以解决禁止下拉的问题~ 禁止下拉 .scroll{ position:absolute; overflow:scroll; -webkit ...
最新文章
- C# GDAL 学习一
- SQL Server中的锁的简单学习
- (转)Spring中Bean的命名问题(id和name区别)及ref和idref之间的区别
- QT的QSyntaxHighlighter类的使用
- leetcode 199. Binary Tree Right Side View | 199. 二叉树的右视图(Java)
- jQuery.Deferred和Promise
- Hibernate脏检查的剖析
- LeetCode 69 X的平方根
- 支付时报错java.lang.RuntimeException: 【微信统一支付】发起支付, returnCode != SUCCESS, returnMsg = appid和mch_id不匹配
- php 递归遍历文件夹,php递归遍历目录 | 学步园
- 安川机器人位置变量要素_安川机器人变量分配(维修)
- 3.2. 开始入住实验
- NTP服务器搭建教程
- 【国际篇】有关学术的一些小知识(EI、SCI、影响因子、中科院分区、JCR分区等)
- Navicat Premium 15安装需要注意的几个细节
- 单相和三相电源的区别
- 处理器访问内存时,CPU核、cache、MMU如何协同工作
- 银行卡Bin和Logo
- 在线ER模型设计工具,支持MySQL、SQLServer、Oracle、Postgresql sql导入,支持表、视图等编辑
- Unity笔记-29-ARPG游戏项目-02-移动跳跃