超简单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 相关文章推荐
extjs 学习笔记(一) 一些基础知识
Oct 13 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
Oct 24 Javascript
JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍
Apr 03 Javascript
JavaScript+CSS实现仿天猫侧边网页菜单效果
Aug 25 Javascript
Node.js的MongoDB驱动Mongoose基本使用教程
Mar 01 Javascript
简单的JS轮播图代码
Jul 18 Javascript
关于微信中a链接无法跳转问题
Aug 02 Javascript
JavaScript实现垂直滚动条效果
Jan 18 Javascript
Vue的Flux框架之Vuex状态管理器
Jul 30 Javascript
详解VScode编辑器vue环境搭建所遇问题解决方案
Apr 26 Javascript
详解webpack引用jquery(第三方模块)的三种办法
Aug 21 jQuery
Vue.js如何使用Socket.IO的示例代码
Sep 05 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 图像函数大举例(非原创)
2009/06/20 PHP
PHP查看当前变量类型的方法
2015/07/31 PHP
老生常谈PHP面向对象之解释器模式
2017/05/17 PHP
PHP+MySQL实现输入页码跳转到指定页面功能示例
2018/06/01 PHP
PHP中mysqli_get_server_version()的实例用法
2020/02/03 PHP
关于jQuery UI 使用心得及技巧
2012/10/10 Javascript
解决js数据包含加号+通过ajax传到后台时出现连接错误
2013/08/01 Javascript
JQuery结合CSS操作打印样式的方法
2013/12/24 Javascript
jquery简单实现图片切换效果的方法
2015/05/12 Javascript
js查看一个函数的执行时间实例代码
2015/09/12 Javascript
JS实现3D图片旋转展示效果代码
2015/09/22 Javascript
JavaScript为事件句柄绑定监听函数实例详解
2015/12/15 Javascript
jQuery UI Bootstrap是什么?
2016/06/17 Javascript
微信小程序 地图定位简单实例
2016/10/14 Javascript
利用js+css+html实现固定table的列头不动
2016/12/08 Javascript
微信JS SDK接入的几点注意事项(必看篇)
2017/06/23 Javascript
深入理解angular2启动项目步骤
2017/07/15 Javascript
vue iView 上传组件之手动上传功能
2018/03/16 Javascript
JS实现读取xml内容并输出到div中的方法示例
2018/04/19 Javascript
vue favicon设置以及动态修改favicon的方法
2018/12/21 Javascript
vue之debounce属性被移除及处理详解
2019/11/13 Javascript
Antd表格滚动 宽度自适应 不换行的实例
2020/10/27 Javascript
Linux下通过python访问MySQL、Oracle、SQL Server数据库的方法
2016/04/23 Python
教你用Python脚本快速为iOS10生成图标和截屏
2016/09/22 Python
解决Linux系统中python matplotlib画图的中文显示问题
2017/06/15 Python
Python实现查找数组中任意第k大的数字算法示例
2019/01/23 Python
Python实现的文轩网爬虫完整示例
2019/05/16 Python
Python使用pyyaml模块处理yaml数据
2020/04/14 Python
DataFrame 数据合并实现(merge,join,concat)
2020/06/14 Python
屈臣氏乌克兰:Watsons UA
2019/10/29 全球购物
工业学校毕业生自荐信范文
2014/01/03 职场文书
个人总结与自我评价
2015/02/14 职场文书
浅谈Mysql多表连接查询的执行细节
2021/04/24 MySQL
Redis调用Lua脚本及使用场景快速掌握
2022/03/16 Redis
MYSQL常用函数介绍
2022/05/05 MySQL
使用Nginx的访问日志统计PV与UV
2022/05/06 Servers