超简单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 相关文章推荐
Javascript变量作用域详解
Dec 06 Javascript
批量修改标签css样式以input标签为例
Jul 31 Javascript
简易的投票系统以及js刷票思路和方法
Apr 07 Javascript
jQuery标签编辑插件Tagit使用指南
Apr 21 Javascript
基于jQuery实现的美观星级评论打分组件代码
Oct 30 Javascript
Jquery遍历select option和添加移除option的实现方法
Aug 26 Javascript
js图片切换具体实现代码
Oct 13 Javascript
Bootstrap + AngularJS 实现简单的数据过滤字符查找功能
Jul 27 Javascript
JavaScript 中 JSON.parse 函数 和 JSON.stringify 函数
Dec 05 Javascript
vue组件开发props验证的实现
Feb 12 Javascript
详解vue-cli3多页应用改造
Jun 04 Javascript
JavaScript实现省市区三级联动
Feb 13 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
PHP extract 将数组拆分成多个变量的函数
2010/06/30 PHP
jQuery EasyUI API 中文文档 - DateBox日期框
2011/10/15 PHP
初品cakephp 入门基础
2012/02/16 PHP
destoon后台网站设置变成空白的解决方法
2014/06/21 PHP
phpstorm配置Xdebug进行调试PHP教程
2014/12/01 PHP
IE本地存储userdata的一个bug说明
2010/07/01 Javascript
javascript实现的使用方向键控制光标在table单元格中切换
2010/11/17 Javascript
基于jquery的不规则矩形的排列实现代码
2012/04/16 Javascript
Three.js源码阅读笔记(光照部分)
2012/12/27 Javascript
angular.foreach 循环方法使用指南
2015/01/06 Javascript
Validform表单验证总结篇
2016/10/31 Javascript
利用JQuery实现datatables插件的增加和删除行功能
2017/01/06 Javascript
JavaScript动态加载重复绑定问题
2018/04/01 Javascript
使用vue点击li,获取当前点击li父辈元素的属性值方法
2018/09/12 Javascript
react 不用插件实现数字滚动的效果示例
2020/04/14 Javascript
[02:33]2014DOTA2 TI每日综述 LGD涉险晋级DK闯入胜者组
2014/07/14 DOTA
Python实现的快速排序算法详解
2017/08/01 Python
Python中pandas dataframe删除一行或一列:drop函数详解
2018/07/03 Python
PyQt5的安装配置过程,将ui文件转为py文件后显示窗口的实例
2019/06/19 Python
Python坐标线性插值应用实现
2019/11/13 Python
解决keras模型保存h5文件提示无此目录问题
2020/07/01 Python
python 三种方法实现对Excel表格的读写
2020/11/19 Python
Python可以用来做什么
2020/11/23 Python
Python3利用scapy局域网实现自动多线程arp扫描功能
2021/01/21 Python
Python3+Appium安装及Appium模拟微信登录方法详解
2021/02/16 Python
试述DBMS的主要功能
2016/11/13 面试题
英语专业毕业生求职简历的自我评价
2013/10/24 职场文书
商场消防管理制度
2014/01/12 职场文书
十岁生日家长答谢词
2014/01/17 职场文书
党支部群众路线整改措施思想汇报
2014/10/10 职场文书
初三英语教学计划
2015/01/23 职场文书
销售员自我评价
2015/03/11 职场文书
工作态度不好检讨书
2015/05/06 职场文书
生产车间管理制度
2015/08/04 职场文书
教师研修随笔感言
2015/11/18 职场文书
Python提取PDF指定内容并生成新文件
2021/06/09 Python