超简单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 chili图片远处放大插件
Nov 30 Javascript
使用jquery mobile做幻灯播放效果实现步骤
Jan 04 Javascript
js读写cookie实现一个底部广告浮层效果的两种方法
Dec 29 Javascript
javascript获取网页宽高方法汇总
Jul 19 Javascript
jquery验证邮箱格式是否正确实例讲解
Nov 16 Javascript
AngularJS转换响应内容
Jan 27 Javascript
详解webpack异步加载业务模块
Jun 23 Javascript
require.js 加载过程与使用方法介绍
Oct 30 Javascript
详解vuex持久化插件解决浏览器刷新数据消失问题
Apr 15 Javascript
了解Javascript中函数作为对象的魅力
Jun 19 Javascript
通过javascript实现段落的收缩与展开
Jun 26 Javascript
D3.js 实现带伸缩时间轴拓扑图的示例代码
Jan 20 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
CPU步进是什么意思?i3-9100F B0步进和U0步进区别知识科普
2020/03/17 数码科技
PHP防范SQL注入的具体方法详解(测试通过)
2014/05/09 PHP
Laravel学习教程之路由模块
2017/08/18 PHP
Laravel关联模型中过滤结果为空的结果集(has和with区别)
2018/10/18 PHP
javascript 操作cookies及正确使用cookies的属性
2009/10/15 Javascript
超级酷和最实用的jQuery实例收集(20个)
2010/04/21 Javascript
jquery复选框全选/取消示例
2013/12/30 Javascript
js判断元素是否隐藏的方法
2014/06/09 Javascript
JS获取图片高度宽度的方法分享
2015/04/17 Javascript
jquery插件qrcode在线生成二维码
2015/04/26 Javascript
VUEJS 2.0 子组件访问/调用父组件的实例
2018/02/10 Javascript
详解node Async/Await 更好的异步编程解决方案
2018/05/10 Javascript
快速解决vue动态绑定多个class的官方实例语法无效的问题
2018/09/05 Javascript
详解Next.js页面渲染的优化方案
2019/01/27 Javascript
JS开发常用工具函数(小结)
2019/07/04 Javascript
Layui数据表格判断编辑输入的值,是否为我需要的类型详解
2019/10/26 Javascript
JS前端模块化原理与实现方法详解
2020/03/17 Javascript
python实现代理服务功能实例
2013/11/15 Python
Python中使用gzip模块压缩文件的简单教程
2015/04/08 Python
在windows系统中实现python3安装lxml
2016/03/23 Python
浅谈Django自定义模板标签template_tags的用处
2017/12/20 Python
Python数据可视化 pyecharts实现各种统计图表过程详解
2019/08/15 Python
PyQT5 emit 和 connect的用法详解
2019/12/13 Python
python异步Web框架sanic的实现
2020/04/27 Python
解决python 执行sql语句时所传参数含有单引号的问题
2020/06/06 Python
Python socket服务常用操作代码实例
2020/06/22 Python
Foot Locker德国官方网站:美国运动服和鞋类零售商
2018/11/01 全球购物
电焊工工作岗位职责
2014/02/06 职场文书
欢送退休感言
2014/02/08 职场文书
法制宣传实施方案
2014/03/13 职场文书
二手房购房意向书范本
2014/04/01 职场文书
学期评语大全
2014/04/30 职场文书
司法助理专业自荐书
2014/06/13 职场文书
工作能力自我评价2015
2015/03/05 职场文书
离婚答辩状范文
2015/05/22 职场文书
MySQL 中如何归档数据的实现方法
2022/03/16 SQL Server