超简单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中dom操作和事件的实例学习-表单验证
Nov 30 Javascript
JS将光标聚焦在文本最后的实现代码
Mar 28 Javascript
JavaScript类型系统之Object详解
Jan 07 Javascript
javascript运算符语法全面概述
Jul 14 Javascript
jQuery右下角悬浮广告实例
Oct 17 Javascript
完美解决UI-Grid表格元素中多个空格显示为一个空格的问题
Apr 25 Javascript
微信小程序日历组件calendar详解及实例
Jun 08 Javascript
vue 子组件向父组件传值方法
Feb 26 Javascript
Vue中v-for的数据分组实例
Mar 07 Javascript
关于vue中 $emit的用法详解
Apr 12 Javascript
基于JS正则表达式实现模板数据动态渲染(实现思路详解)
Mar 07 Javascript
JS实现点星星消除小游戏
Mar 24 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调用nginx的mod_zip模块打包ZIP文件
2014/06/11 PHP
yii插入数据库防并发的简单代码
2017/05/27 PHP
php实现基于pdo的事务处理方法示例
2017/07/21 PHP
PHP实现的回溯算法示例
2017/08/15 PHP
laravel 实现关闭CSRF(全部关闭、部分关闭)
2019/10/21 PHP
js导出格式化的excel 实例方法
2013/07/17 Javascript
利用jQuery实现可输入搜索文字的下拉框
2013/10/23 Javascript
jQuery实现的五子棋游戏实例
2015/06/13 Javascript
jQuery validate插件submitHandler提交导致死循环解决方法
2016/01/21 Javascript
jQuery+css实现的时钟效果(兼容各浏览器)
2016/01/27 Javascript
Angularjs实现上传图片预览功能
2017/09/01 Javascript
centos 上快速搭建ghost博客方法分享
2018/05/23 Javascript
图文讲解vue的v-if使用方法
2019/02/11 Javascript
vue.js实现照片放大功能
2020/06/23 Javascript
python简单获取本机计算机名和IP地址的方法
2015/06/03 Python
Python 专题四 文件基础知识
2017/03/20 Python
Python判断telnet通不通的实例
2019/01/26 Python
Python标准库使用OrderedDict类的实例讲解
2019/02/14 Python
pyqt5 获取显示器的分辨率的方法
2019/06/18 Python
python实现猜拳游戏
2020/03/04 Python
PyCharm License Activation激活码失效问题的解决方法(图文详解)
2020/03/12 Python
PyQt5实现仿QQ贴边隐藏功能的实例代码
2020/05/24 Python
基于Modernizr 让网站进行优雅降级的分析
2013/04/21 HTML / CSS
美国高街时尚品牌:OASAP
2016/07/24 全球购物
英国景点门票网站:attractiontix
2019/08/27 全球购物
优秀医生事迹材料
2014/02/12 职场文书
2014年基层党组织公开承诺书
2014/03/29 职场文书
管理建议书范文
2014/05/13 职场文书
工作作风懒散检讨书
2014/10/29 职场文书
证婚人婚礼致辞
2015/07/28 职场文书
python实现图片批量压缩
2021/04/24 Python
python批量创建变量并赋值操作
2021/06/03 Python
springboot如何初始化执行sql语句
2021/06/22 Java/Android
「Manga Time Kirara MAX」2022年5月号封面公开
2022/03/21 日漫
vue如何清除浏览器历史栈
2022/05/25 Vue.js
Windows server 2012 NTP时间同步的实现
2022/06/25 Servers