超简单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中的私有成员
Sep 18 Javascript
5款Javascript颜色选择器
Oct 25 Javascript
javascript调试说明
Jun 07 Javascript
javascript模拟实现C# String.format函数功能代码
Nov 25 Javascript
理解javascript函数式编程中的闭包(closure)
Mar 08 Javascript
AngularJS入门教程之过滤器用法示例
Nov 02 Javascript
Vue中定义全局变量与常量的各种方式详解
Aug 23 Javascript
微信小程序wx.previewImage预览图片实例详解
Dec 07 Javascript
浅谈vue的props,data,computed变化对组件更新的影响
Jan 16 Javascript
js实现图片跟随鼠标移动效果
Oct 16 Javascript
Vue实现兄弟组件间的联动效果
Jan 21 Javascript
javascript canvas检测小球碰撞
Apr 17 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-fpm 参数的深入理解
2013/06/03 PHP
完美解决:Apache启动问题―(OS 10022)提供了一个无效的参数
2013/06/08 PHP
PHP 无限级分类
2017/05/04 PHP
PHP实现微信模拟登陆并给用户发送消息的方法【文字,图片,图文】
2017/06/29 PHP
实例讲解PHP中使用命名空间
2019/01/27 PHP
php xhprof使用实例详解
2019/04/15 PHP
KindEditor在php环境下上传图片功能集成的方法示例
2020/07/20 PHP
如何用javascript去掉字符串里的所有空格
2007/02/08 Javascript
利用ASP发送和接收XML数据的处理方法与代码
2007/11/13 Javascript
myEvent.js javascript跨浏览器事件框架
2011/10/24 Javascript
Iframe实现跨浏览器自适应高度解决方法
2014/09/02 Javascript
AngularJS入门教程之学习环境搭建
2014/12/06 Javascript
封装好的js判断操作系统与浏览器代码分享
2015/01/09 Javascript
javascript结合Canvas 实现简易的圆形时钟
2015/03/11 Javascript
深入浅析JavaScript中的constructor
2016/04/19 Javascript
浅析Bootstrap表格的使用
2016/06/23 Javascript
React如何将组件渲染到指定DOM节点详解
2017/09/08 Javascript
使用vue-infinite-scroll实现无限滚动效果
2018/06/22 Javascript
VUE 全局变量的几种实现方式
2018/08/22 Javascript
AngularJS实现的自定义过滤器简单示例
2019/02/02 Javascript
vue中的使用token的方法示例
2020/03/10 Javascript
JavaScript装箱及拆箱boxing及unBoxing用法解析
2020/06/15 Javascript
[37:47]IG vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
实现python版本的按任意键继续/退出
2016/09/26 Python
Django 生成登陆验证码代码分享
2017/12/12 Python
详解Python3 pandas.merge用法
2019/09/05 Python
Python爬取知乎图片代码实现解析
2019/09/17 Python
Python实现Wordcloud生成词云图的示例
2020/03/30 Python
解决Python在导入文件时的FileNotFoundError问题
2020/04/10 Python
Python selenium爬虫实现定时任务过程解析
2020/06/08 Python
HTML5 input placeholder 颜色修改示例
2014/05/30 HTML / CSS
size?瑞典:英国伦敦的球鞋精品店
2018/03/01 全球购物
日本最大的彩色隐形眼镜销售网站:CharmColor
2020/09/09 全球购物
销售内勤岗位职责
2015/02/10 职场文书
2015年英语教学工作总结
2015/05/25 职场文书
JAVA springCloud项目搭建流程
2022/05/11 Java/Android