超简单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脚本语言在网页中的简单应用
May 13 Javascript
分页栏的web标准实现
Nov 01 Javascript
button没写type=button会导致点击时提交
Mar 06 Javascript
javascript 实现map集合
Apr 03 Javascript
javascript弹出拖动窗口
Aug 11 Javascript
页面内容排序插件jSort使用方法
Oct 10 Javascript
利用js来实现缩略语列表、文献来源链接和快捷键列表
Dec 16 Javascript
jq stop()和:is(:animated)的用法及区别(详解)
Feb 12 Javascript
基于Vue实现图书管理功能
Oct 17 Javascript
vue.js路由mode配置之去掉url上默认的#方法
Nov 01 Javascript
ckeditor一键排版功能实现方法分析
Feb 06 Javascript
Js实现粘贴上传图片的原理及示例
Dec 09 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操作XML作为数据库的类
2010/12/19 PHP
yii框架搜索分页modle写法
2016/12/19 PHP
Laravel框架查询构造器 CURD操作示例
2019/09/04 PHP
jQuery 开天辟地入门篇一
2009/12/09 Javascript
jQuery load方法用法集锦
2011/12/06 Javascript
不到30行JS代码实现Excel表格的方法
2014/11/15 Javascript
Jquery插件仿百度搜索关键字自动匹配功能
2016/05/11 Javascript
jQuery的Cookie封装,与PHP交互的简单实现
2016/10/05 Javascript
微信小程序 弹窗自定义实例代码
2017/03/08 Javascript
JS中使用media实现响应式布局
2017/08/04 Javascript
vue中多个倒计时实现代码实例
2019/03/27 Javascript
vue使用exif获取图片经纬度的示例代码
2020/12/11 Vue.js
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
2021/01/29 jQuery
[11:57]《一刀刀一天》第十七期:TI中国军团加油!
2014/05/26 DOTA
[04:04]DOTA2亚洲邀请赛比赛场馆&酒店全攻略
2017/03/23 DOTA
给Python初学者的一些编程技巧
2015/04/03 Python
python 定义给定初值或长度的list方法
2018/06/23 Python
CentOS7下python3.7.0安装教程
2018/07/30 Python
centos6.5安装python3.7.1之后无法使用pip的解决方案
2019/02/14 Python
Python分布式进程中你会遇到的问题解析
2019/05/28 Python
Python 用matplotlib画以时间日期为x轴的图像
2019/08/06 Python
用sqlalchemy构建Django连接池的实例
2019/08/29 Python
使用pyshp包进行shapefile文件修改的例子
2019/12/06 Python
Macbook安装Python最新版本、GUI开发环境、图像处理、视频处理环境详解
2020/02/17 Python
mac在matplotlib中显示中文的操作方法
2020/03/06 Python
Python如何使用神经网络进行简单文本分类
2021/02/25 Python
HTML5单选框、复选框、下拉菜单、文本域的实现代码
2020/12/01 HTML / CSS
韩国现代百货官网:Hmall
2018/03/21 全球购物
美国智能家居专家:tink
2019/06/04 全球购物
HomeAway英国:全球领先的度假租赁在线市场
2020/02/03 全球购物
个人优缺点自我评价
2014/01/27 职场文书
业务总经理岗位职责
2014/02/03 职场文书
职工代表大会主持词
2014/04/01 职场文书
医院竞聘演讲稿
2014/05/16 职场文书
2014年安全工作总结范文
2014/11/13 职场文书
2015年办公室个人工作总结
2015/04/20 职场文书