超简单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字典探测用户名工具
Oct 05 Javascript
javascript 模式设计之工厂模式学习心得
Apr 27 Javascript
javascript使用定时函数实现跳转到某个页面
Dec 25 Javascript
JavaScript编程中window的location与history对象详解
Oct 26 Javascript
jQuery插件zTree实现获取当前选中节点在同级节点中序号的方法
Mar 08 Javascript
jQuery UI Grid 模态框中的表格实例代码
Apr 01 jQuery
js实现1,2,3,5数字按照概率生成
Sep 12 Javascript
Three.js加载外部模型的教程详解
Nov 10 Javascript
深入理解react-router 路由的实现原理
Sep 26 Javascript
微信小程序基础教程之worker线程的使用方法
Jul 15 Javascript
Vue实现按钮级权限方案
Nov 21 Javascript
js实现简单的秒表
Jan 16 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数据库链接类(PDO+Access)实例分享
2013/12/05 PHP
php+ajax实时输入自动搜索匹配的方法
2014/12/26 PHP
php自定义函数实现汉字转换utf8编码的方法
2016/09/29 PHP
PHP+Mysql+Ajax实现淘宝客服或阿里旺旺聊天功能(前台页面)
2017/06/16 PHP
利用PHP获取汉字首字母并且分组排序详解
2017/10/22 PHP
escape、encodeURI、encodeURIComponent等方法的区别比较
2006/12/27 Javascript
javascript 学习之旅 (2)
2009/02/05 Javascript
javascript判断两个IP地址是否在同一个网段的实现思路
2013/12/13 Javascript
基于jQuery实现的菜单切换效果
2015/10/16 Javascript
移动适配的几种方案(三种方案)
2016/11/25 Javascript
jquery广告无缝轮播实例
2017/01/05 Javascript
原生js实现中奖信息无间隙滚动效果
2017/01/18 Javascript
angularjs的select使用及默认选中设置
2017/04/08 Javascript
[js高手之路]设计模式系列课程-发布者,订阅者重构购物车的实例
2017/08/29 Javascript
js禁止浏览器页面后退功能的实例(推荐)
2017/09/01 Javascript
JS手机端touch事件计算滑动距离的方法示例
2017/10/26 Javascript
Bootbox将后台JSON数据填充Form表单的实例代码
2018/09/10 Javascript
Angular4 Select选择改变事件的方法
2018/10/09 Javascript
详解vue中router-link标签所必备了解的属性
2019/04/15 Javascript
[02:58]魔廷新尊——痛苦女王至宝语音台词节选
2020/06/14 DOTA
用Python制作简单的朴素基数估计器的教程
2015/04/01 Python
python连接MySQL数据库实例分析
2015/05/12 Python
PyQt5图形界面播放音乐的实例
2019/06/17 Python
Django 拆分model和view的实现方法
2019/08/16 Python
opencv python如何实现图像二值化
2020/02/03 Python
Python图像处理库PIL的ImageDraw模块介绍详解
2020/02/26 Python
Timberland美国官网:全球领先的户外品牌
2016/08/15 全球购物
联想美国官方商城:Lenovo美国
2017/06/19 全球购物
采用冷却技术的超自然舒适度:GhostBed床垫
2018/09/18 全球购物
你所知道的集合类都有哪些?主要方法?
2012/12/31 面试题
介绍一下write命令
2014/08/10 面试题
行政人事经理职位说明书
2014/03/05 职场文书
群众路线四风对照检查材料
2014/11/04 职场文书
杭州黄龙洞导游词
2015/02/10 职场文书
高一数学教学反思
2016/02/18 职场文书
python如何利用cv2模块读取显示保存图片
2021/06/04 Python