超简单JS二级、多级联动的简单实例


Posted in Javascript onFebruary 18, 2014

超简单的JS联动代码,不过要配合jquery用,也可以自己修改为不用任选JS库的代码

<tr>
  <th>一级分类</th><td>
    <select name="subsidiary_cat_id" class="subsidiary_cat_id" onchange="linkage('.subsidiary_cat_id','.cat_id');">
      <option>请选择</option>
    </select>
    <script language="javascript">
    var linkage_data={$list_file_category};//初始化级联数据,{$list_file_category}是PHP的JSON_ENCODE的数据,数组有3个数据,id,parent_id,name
    function linkage(parent_dom,son_dom){
        var parent_id=0;
        if(parent_dom){
            parent_id=$(parent_dom).val();    
        }
        $(son_dom).empty();//先清空下拉
        var html='<option>请选择</option>';
        $.each(linkage_data,function(key,value){
            if(value.parent_id==parent_id){
                html+="<option value='"+value.id+"'>"+value.name+"</option>";
            }
        });
        $(son_dom).append(html);
    }
    linkage('',".subsidiary_cat_id")//不传上级节点,表示为第一级数据
    </script>
    </td></tr>
<tr><th>二级目录</th><td>
  <select name="cat_id" class="cat_id">
    <option>请选择</option>
  </select></td></tr>
Javascript 相关文章推荐
为jquery.ui.dialog 增加“自动记住关闭时的位置”的功能
Nov 24 Javascript
js 通过html()及text()方法获取并设置p标签的显示值
May 14 Javascript
基于JS实现简单的样式切换效果代码
Sep 04 Javascript
javascript自动恢复文本框点击清除后的默认文本
Jan 12 Javascript
利用JavaScript判断浏览器类型及版本
Aug 23 Javascript
jquery对所有input type=text的控件赋值实现方法
Dec 02 Javascript
JavaScript之filter_动力节点Java学院整理
Jun 28 Javascript
谈谈对vue响应式数据更新的误解
Aug 01 Javascript
移动端Ionic App 资讯上下循环滚动的实现代码(跑马灯效果)
Aug 29 Javascript
JS switch判断 三目运算 while 及 属性操作代码
Sep 03 Javascript
Vue的路由及路由钩子函数的实现
Jul 02 Javascript
关于Node.js中频繁修改代码重启服务器的问题
Oct 15 Javascript
jquery easyui中treegrid用法的简单实例
Feb 18 #Javascript
DIV始终居中的js代码
Feb 17 #Javascript
jquery实现邮箱自动补全功能示例分享
Feb 17 #Javascript
JQuery与JS里submit()的区别示例介绍
Feb 17 #Javascript
按Enter键触发事件的jquery方法实现代码
Feb 17 #Javascript
清除div下面的所有标签的方法
Feb 17 #Javascript
JS控制一个DIV层在指定时间内消失的方法
Feb 17 #Javascript
You might like
全国FM电台频率大全 - 26 西藏自治区
2020/03/11 无线电
PHP has encountered an Access Violation at 7C94BD02解决方法
2009/08/24 PHP
保存到桌面、设为桌面且带图标的PHP代码
2013/11/19 PHP
通过正则格式化url查询字符串实现代码
2012/12/28 Javascript
js 获取后台的字段 改变 checkbox的被选中的状态 代码
2013/06/05 Javascript
jQuery中after的两种用法实例
2013/07/03 Javascript
JavaSciprt中处理字符串之sup()方法的使用教程
2015/06/08 Javascript
JS实现超精简的链接列表在固定区域内滚动效果代码
2015/11/04 Javascript
前端框架Vue.js构建大型应用浅析
2016/09/12 Javascript
js 实现一些跨浏览器的事件方法详解及实例
2016/10/27 Javascript
利用JavaScript实现拖拽改变元素大小
2016/12/14 Javascript
AngularJS+Bootstrap3多级导航菜单的实现代码
2017/08/16 Javascript
Vue-router路由判断页面未登录跳转到登录页面的实例
2017/10/26 Javascript
vue如何通过id从列表页跳转到对应的详情页
2018/05/01 Javascript
javascript数组元素删除方法delete和splice解析
2019/12/09 Javascript
[06:24]DOTA2亚洲邀请赛小组赛第三日 TOP10精彩集锦
2015/02/01 DOTA
[02:00]最后,我终于出了辉耀
2018/03/27 DOTA
[46:55]完美世界DOTA2联赛决赛 FTD vs Phoenix 第三场 11.08
2020/11/11 DOTA
python通过pil模块将raw图片转换成png图片的方法
2015/03/16 Python
Python使用Flask框架获取当前查询参数的方法
2015/03/21 Python
python检查序列seq是否含有aset中项的方法
2015/06/30 Python
深入理解Python3中的http.client模块
2017/03/29 Python
酷! 程序员用Python带你玩转冲顶大会
2018/01/17 Python
numpy中实现二维数组按照某列、某行排序的方法
2018/04/04 Python
Python3+OpenCV2实现图像的几何变换(平移、镜像、缩放、旋转、仿射)
2019/05/13 Python
python django生成迁移文件的实例
2019/08/31 Python
CSS3让登陆面板3D旋转起来
2016/05/03 HTML / CSS
canvas学习和滤镜实现代码
2018/08/22 HTML / CSS
丝芙兰波兰:Sephora.pl
2018/03/25 全球购物
面向对象概念面试题(.NET)
2016/11/04 面试题
学校元旦晚会方案
2014/02/19 职场文书
2015幼儿园新学期寄语
2015/02/27 职场文书
小学教师见习总结
2015/06/23 职场文书
2016优秀护士求职自荐信
2016/01/28 职场文书
2016年安全生产先进个人事迹材料
2016/02/29 职场文书
JS监听Esc 键触发事键
2021/04/14 Javascript