Jquery Select 插件 lyhucSelect 数据联动

数据源：

View Code

var areaInfo = new Array();
areaInfo[0] = new Array();
areaInfo[0][0]="1";
areaInfo[0][1]="Beijing";
areaInfo[0][2]="0";
areaInfo[0][3]="0";
areaInfo[1] = new Array();
areaInfo[1][0]="2";
areaInfo[1][1]="Shanghai";
areaInfo[1][2]="0";
areaInfo[1][3]="0";
areaInfo[2] = new Array();
areaInfo[2][0]="3";
areaInfo[2][1]="Jing'an";
areaInfo[2][2]="2";
areaInfo[2][3]="0";
areaInfo[3] = new Array();
areaInfo[3][0]="4";
areaInfo[3][1]="Changning";
areaInfo[3][2]="2";
areaInfo[3][3]="0";
areaInfo[4] = new Array();
areaInfo[4][0]="5";
areaInfo[4][1]="Luwan";
areaInfo[4][2]="2";
areaInfo[4][3]="0";
areaInfo[5] = new Array();
areaInfo[5][0]="6";
areaInfo[5][1]="Huangp";
areaInfo[5][2]="2";
areaInfo[5][3]="0";
areaInfo[6] = new Array();
areaInfo[6][0]="7";
areaInfo[6][1]="Pudong";
areaInfo[6][2]="2";
areaInfo[6][3]="0";
areaInfo[7] = new Array();
areaInfo[7][0]="8";
areaInfo[7][1]="Minhang";
areaInfo[7][2]="2";
areaInfo[7][3]="0";
areaInfo[8] = new Array();
areaInfo[8][0]="9";
areaInfo[8][1]="Qingpu";
areaInfo[8][2]="2";
areaInfo[8][3]="0";
areaInfo[9] = new Array();
areaInfo[9][0]="10";
areaInfo[9][1]="Hongkou";
areaInfo[9][2]="2";
areaInfo[9][3]="0";
areaInfo[10] = new Array();
areaInfo[10][0]="11";
areaInfo[10][1]="Zhabei";
areaInfo[10][2]="2";
areaInfo[10][3]="0";
areaInfo[11] = new Array();
areaInfo[11][0]="12";
areaInfo[11][1]="Putuo";
areaInfo[11][2]="2";
areaInfo[11][3]="0";
areaInfo[12] = new Array();
areaInfo[12][0]="13";
areaInfo[12][1]="Yangpu";
areaInfo[12][2]="2";
areaInfo[12][3]="0";
areaInfo[13] = new Array();
areaInfo[13][0]="14";
areaInfo[13][1]="Others";
areaInfo[13][2]="2";
areaInfo[13][3]="0";

jquery.lyhucSelect.js

(function($) {$.fn.lyhucSelect = function(options) {var element     = this;var elementid     =  "#" + element[0].id;var defaults = {dataSource:{},subSelect:'#subcategory',option:{text:'--Select--',value:''},value:'0',parentid:0};var options = $.extend(defaults, options);var defaultoption = new Option();var defaultsuboption = new Option();(function init(){defaultoption.text=options.option.text;defaultoption.value=options.option.value;$(elementid).append(defaultoption);defaultsuboption.text=options.option.text;defaultsuboption.value=options.option.value;$(options.subSelect).append(defaultsuboption);$(options.dataSource).each(function(i){var id=options.dataSource[i][0];var mc=options.dataSource[i][1];if(options.parentid==options.dataSource[i][2]){var newoption = new Option();newoption.value=id;newoption.text=mc;$(elementid).append(newoption);}});})();return this.each(function(){$(this).bind("change",function(e){var currentVal=$(this).val();var tmpDepth=0;$(options.subSelect).empty();$(options.dataSource).each(function(i){var id=options.dataSource[i][0];var mc=options.dataSource[i][1];if(currentVal==options.dataSource[i][2]){var newoption = new Option();newoption.value=id;newoption.text=mc;$(options.subSelect).append(newoption);tmpDepth++;}});if(tmpDepth==0){var parentoption = new Option();parentoption.value=$(elementid).val();parentoption.text=$(elementid).find('option:selected').text();$(options.subSelect).append(parentoption);}});});};})(jQuery);

调用：

$('#cityCategory').lyhucSelect({dataSource:areaInfo,subSelect:'#areCategory'});

效果：

转载于:https://www.cnblogs.com/hubj/archive/2011/03/29/1998284.html

Jquery Select 插件 lyhucSelect 数据联动相关推荐

bootstrap select 插件两级联动
2019独角兽企业重金招聘Python工程师标准>>> bootstrap select 插件两级联动插件地址:http://silviomoreto.github.io/boot ...
Jquery控制select实现dataTables数据联动刷新
场景效果实现 html页面代码页面使用的是thymeleaf模板. 下拉框代码: <div class="form-group row col-md-6">< ...
jsp ajax动态添加数据,jquery Ajax实现Select动态添加数据
jquery Ajax实现Select动态添加数据,具体内容如下 1.背景最近在工作中,遇到了一个关于select的问题.一般情况下,select下拉框中的数据都是固定的或者直接在jsp中读取列表值 ...
h5仿android 京东三级联动,jquery仿京东商城三级联动代码插件
2019-3-1更新:location.js文件里第三级县之前使用京东旧域名d.360buy.com的jsonp数据,域名做了跳转首页所以第三加载不出来.现在已经更新为d.jd.com,正常加载.不过 ...
Spring Boot+MybatisPlus使用JQuery DataTables表格插件展示数据、实现分页和模糊查询等功能
Spring Boot+MybatisPlus使用JQuery DataTables表格插件展示数据.实现分页和查询功能一.部分技术选型二.项目结构三.功能需求和效果展示四.关键代码 4.1页 ...
java ajax jquery分页插件_JQueryPagination分页插件,ajax从struts请求数据
2017-07-16 学完了struts2,做了个关于分页的小例子,用到了JQuery分页插件Pagination,先贴下插件下载地址插件作者对于参数讲解的不够详细,琢磨了半天才明白怎么用,不多说, ...
开源数据可视化 datart-自定义Jquery图表插件教程
在数据可视化应用方面,滚动图表插件一直备受欢迎,下面给大家一份关于滚动图标插件干活教程. 滚动图标插件教程主要使用 jQuery jQuery.marquee jQuery-DataTables 视 ...
html中国家的下拉列表,jQuery Select下拉列表国家选择插件
jQuery Select下拉国家选择插件简介本文提供JQuery国家选择插件制作select下拉框带搜索功能,和图标的下拉国家列表选择插件代码.支持搜索快速查找,带国旗的国家下拉选择插件! jQu ...
超强1000个jquery极品插件！（连载中。。。。最近更新20090710）
花N长时间积累的Jquery插件,希望大家喜欢.大家还有什么新的插件,请留言,我们一并收录. 感谢大家的支持. ++++++++++++++++++++++++++++++++++++++++++++ ...

Jquery Select 插件 lyhucSelect 数据联动

Jquery Select 插件 lyhucSelect 数据联动相关推荐

最新文章

热门文章