超简单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的写法不同导致的兼容性问题的解决方法
Jul 29 Javascript
选择复选框按钮置灰否则按钮可用
May 22 Javascript
php常见的页面跳转方法汇总
Apr 15 Javascript
BootStrap中Tab页签切换实例代码
May 30 Javascript
JQuery 设置checkbox值二次无效的解决方法
Jul 22 Javascript
老生常谈javascript的类型转换
Oct 12 Javascript
你不知道的 javascript【推荐】
Jan 08 Javascript
JavaScript实现的可变动态数字键盘控件方式实例代码
Jul 15 Javascript
Vue最新防抖方案(必看篇)
Oct 30 Javascript
vue.js 实现a标签href里添加参数
Nov 12 Javascript
JS实现吸顶特效
Jan 08 Javascript
jQuery实现的解析本地 XML 文档操作示例
Apr 30 jQuery
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中函数rand和mt_rand的区别比较
2012/12/26 PHP
apache配置虚拟主机的方法详解
2013/06/17 PHP
php 无限级分类,超级简单的无限级分类,支持输出树状图
2014/06/29 PHP
CI(CodeIgniter)模型用法实例分析
2016/01/20 PHP
thinkPHP实现递归循环栏目并按照树形结构无限极输出的方法
2016/05/19 PHP
php实现图片上传时添加文字和图片水印技巧
2020/04/18 PHP
Js+Dhtml:WEB程序员简易开发工具包(预先体验版)
2006/11/07 Javascript
JavaScript的面向对象(二)
2006/11/09 Javascript
解决jquery的.animate()函数在IE6下的问题
2010/12/03 Javascript
超简单JS二级、多级联动的简单实例
2014/02/18 Javascript
JavaScript利用fetch实现异步请求的方法实例
2017/07/26 Javascript
浅谈vue路径优化之resolve
2017/10/13 Javascript
详解angularjs实现echart图表效果最简洁教程
2017/11/29 Javascript
Node.js中DNS模块学习总结
2018/02/28 Javascript
Vue 自定义标签的src属性不能使用相对路径的解决
2019/09/17 Javascript
vue项目前端微信JSAPI与外部H5支付相关实现过程及常见问题
2020/04/14 Javascript
javascript 数组(list)添加/删除的实现
2020/12/17 Javascript
[01:20]PWL开团时刻DAY9——听说潮汐没用?
2020/11/10 DOTA
Python中的字符串操作和编码Unicode详解
2017/01/18 Python
浅谈Python中的zip()与*zip()函数详解
2018/02/24 Python
详解python中sort排序使用
2019/03/23 Python
PyCharm安装Markdown插件的两种方法
2019/06/24 Python
Django发送邮件和itsdangerous模块的配合使用解析
2019/08/10 Python
python实现对服务器脚本敏感信息的加密解密功能
2019/08/13 Python
Python logging日志模块 配置文件方式
2020/07/12 Python
css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局
2014/10/10 HTML / CSS
复古风格的女装和装饰品:ModCloth
2017/12/29 全球购物
HEMA英国:荷兰原创设计
2018/08/28 全球购物
Trip.com澳大利亚:在线旅行社
2019/12/01 全球购物
新闻记者实习自我鉴定
2013/09/19 职场文书
商务英语专业应届毕业生求职信
2013/10/28 职场文书
群众路线教育实践活动个人对照检查材料
2014/09/22 职场文书
银行优秀员工推荐信
2015/03/24 职场文书
欠款证明
2015/06/24 职场文书
庆祝教师节主持词
2015/07/06 职场文书
Python集合set()使用的方法详解
2022/03/18 Python