超简单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 无符号右移运算符
Apr 17 Javascript
js 效率组装字符串 StringBuffer
Dec 23 Javascript
jquery ajax请求实例深入解析
Nov 26 Javascript
jQuery JSON实现无刷新三级联动实例探讨
May 28 Javascript
JavaScript 32位整型无符号操作示例
Dec 08 Javascript
Javascript 正则表达式实现为数字添加千位分隔符
Mar 10 Javascript
JS 调用微信扫一扫功能
Dec 22 Javascript
ajax接收后台数据在html页面显示
Feb 19 Javascript
js常用的继承--组合式继承
Mar 06 Javascript
Vue如何引入远程JS文件
Apr 20 Javascript
IScroll5实现下拉刷新上拉加载的功能实例
Aug 11 Javascript
angularjs实现的购物金额计算工具示例
May 08 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
ob_start(),ob_start('ob_gzhandler')使用
2006/12/25 PHP
PHP生成图片验证码、点击切换实例
2014/06/25 PHP
php使用curl代理实现抓取数据的方法
2017/02/03 PHP
PHP验证码无法显示的原因及解决办法
2017/08/11 PHP
PHP迭代器和迭代的实现与使用方法分析
2018/04/19 PHP
Laravel 登录后清空COOKIE的操作方法
2019/10/14 PHP
js技巧--转义符&quot;\&quot;的妙用
2007/01/09 Javascript
JavaScript 利用Cookie记录用户登录信息
2009/12/08 Javascript
javascript showModalDialog模态对话框使用说明
2009/12/31 Javascript
js获取元素相对窗口位置的实现代码
2014/09/28 Javascript
浅谈document.write()输出样式
2015/05/07 Javascript
轻松学习jQuery插件EasyUI EasyUI创建CRUD应用
2015/11/30 Javascript
基于javascript实现随机颜色变化效果
2016/01/14 Javascript
Angular中$compile源码分析
2016/01/28 Javascript
jQuery获取某天的农历日期并判断是否除夕或新年的方法
2016/03/01 Javascript
关于 jQuery Easyui异步加载tree的问题解析
2016/12/06 Javascript
jQuery手指滑动轮播效果
2016/12/22 Javascript
JS前端开发判断是否是手机端并跳转操作(小结)
2017/02/05 Javascript
Easyui使用Dialog行内按钮布局的实例
2017/07/27 Javascript
使用Angular CLI生成 Angular 5项目教程详解
2018/03/18 Javascript
原生javascript AJAX 三级联动的实现代码
2018/05/04 Javascript
vue.js实现插入数值与表达式的方法分析
2018/07/06 Javascript
Vue监听滚动实现锚点定位(双向)示例
2019/11/13 Javascript
微信小程序保存图片到相册权限设置
2020/04/09 Javascript
使用 Jest 和 Supertest 进行接口端点测试实例详解
2020/04/25 Javascript
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
2020/04/27 Javascript
Python for循环与getitem的关系详解
2020/01/02 Python
Python getsizeof()和getsize()区分详解
2020/11/20 Python
HTML5中div、article、section的区别及使用介绍
2013/08/14 HTML / CSS
Origins悦木之源香港官网:雅诗兰黛集团高端植物护肤品牌
2018/03/21 全球购物
党的群众路线教育实践活动批评与自我批评
2014/02/16 职场文书
动员大会主持词
2014/03/20 职场文书
《第一次抱母亲》教学反思
2014/04/16 职场文书
民族团结演讲稿范文
2014/08/27 职场文书
2014年班干部工作总结
2014/11/25 职场文书
干部作风纪律整顿心得体会
2016/01/23 职场文书