超简单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 相关文章推荐
window.parent调用父框架时 ie跟火狐不兼容问题
Jul 30 Javascript
浅谈JavaScript数据类型及转换
Feb 28 Javascript
js实现各种复制到剪贴板的方法(分享)
Oct 27 Javascript
在js里怎么实现Xcode里的callFuncN方法(详解)
Nov 05 Javascript
Jquery树插件zTree实现菜单树
Jan 24 Javascript
vue-router实现tab标签页(单页面)详解
Oct 17 Javascript
浅谈mint-ui 填坑之路
Nov 06 Javascript
基于js文件加载优化(详解)
Jan 03 Javascript
JavaScript类的继承操作实例总结
Dec 20 Javascript
vue将后台数据时间戳转换成日期格式
Jul 31 Javascript
Vue Element校验validate的实例
Sep 21 Javascript
angular异步验证器防抖实例详解
Mar 31 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
整理的9个实用的PHP库简介和下载
2010/11/09 PHP
php实现按文件名搜索文件的远程文件查找器
2014/05/10 PHP
PHP防止表单重复提交的几种常用方法汇总
2014/08/19 PHP
如何使用php实现评委评分器
2015/07/31 PHP
PHP常见数组函数用法小结
2016/03/21 PHP
Yii2 rbac权限控制操作步骤实例教程
2016/04/29 PHP
Javascript中的常见排序算法
2007/03/27 Javascript
javascript利用初始化数据装配模版的实现代码
2010/11/17 Javascript
js获取select标签选中值的两种方式
2014/01/09 Javascript
node.js中的forEach()是同步还是异步呢
2015/01/29 Javascript
javascript中innerText和innerHTML属性用法实例分析
2015/05/13 Javascript
在JavaScript的jQuery库中操作AJAX的方法讲解
2015/08/15 Javascript
jQuery UI库中dialog对话框功能使用全解析
2016/04/23 Javascript
jQuery中on绑定事件后引发的事件冒泡问题如何解决
2016/05/25 Javascript
浅谈Javascript中的函数、this以及原型
2016/10/09 Javascript
Jquery Easyui搜索框组件SearchBox使用详解(19)
2016/12/17 Javascript
解决angularJS中input标签的ng-change事件无效问题
2018/09/13 Javascript
Vue实现兄弟组件间的联动效果
2020/01/21 Javascript
微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)
2020/03/10 Javascript
Vue页面跳转传递参数及接收方式
2020/09/09 Javascript
几个适合python初学者的简单小程序,看完受益匪浅!(推荐)
2019/04/16 Python
Python数据可视化:饼状图的实例讲解
2019/12/07 Python
Pytorch损失函数nn.NLLLoss2d()用法说明
2020/07/07 Python
python 多线程爬取壁纸网站的示例
2021/02/20 Python
轻松制作精彩视频:Animoto
2018/09/19 全球购物
当一个对象被当作参数传递到一个方法后,此方法可改变这个对象的属性,并可返回变化后的结果,那么这里到底是值传递还是引用传递?
2014/09/09 面试题
描述一下JVM加载class文件的原理机制
2013/12/08 面试题
上海中网科技笔试题
2012/02/19 面试题
会计专业推荐信
2013/10/29 职场文书
物流创业计划书
2014/02/01 职场文书
优秀医生事迹材料
2014/02/12 职场文书
工程部主管岗位职责
2015/02/12 职场文书
涨价通知
2015/04/23 职场文书
html form表单基础入门案例讲解
2021/07/15 HTML / CSS
JPA 通过Specification如何实现复杂查询
2021/11/23 Java/Android
浅谈为什么我的 z-index 又不生效了
2022/07/15 HTML / CSS