>웹 프론트엔드 >JS 튜토리얼 >lyhucSelect Jquery_jquery 기반 데이터 연계 플러그인 선택

lyhucSelect Jquery_jquery 기반 데이터 연계 플러그인 선택

WBOY
WBOY원래의
2016-05-16 18:08:481343검색

数据源:

复代码 代码如下:

var AreaInfo = new Array();
areaInfo[0] = 새로운 배열();
areaInfo[0][0]="1";
areaInfo[0][1]="베이징";
areaInfo[0][2]="0";
areaInfo[0][3]="0";
areaInfo[1] = 새 배열();
areaInfo[1][0]="2";
areaInfo[1][1]="상하이";
areaInfo[1][2]="0";
areaInfo[1][3]="0";
areaInfo[2] = 새 배열();
areaInfo[2][0]="3";
areaInfo[2][1]="징안";
areaInfo[2][2]="2";
areaInfo[2][3]="0";
areaInfo[3] = 새 배열();
areaInfo[3][0]="4";
areaInfo[3][1]="창닝";
areaInfo[3][2]="2";
areaInfo[3][3]="0";
areaInfo[4] = 새로운 배열();
areaInfo[4][0]="5";
areaInfo[4][1]="루완";
areaInfo[4][2]="2";
areaInfo[4][3]="0";
areaInfo[5] = 새 배열();
areaInfo[5][0]="6";
areaInfo[5][1]="황프";
areaInfo[5][2]="2";
지역정보[5][3]="0";
areaInfo[6] = 새 배열();
areaInfo[6][0]="7";
areaInfo[6][1]="푸동";
areaInfo[6][2]="2";
areaInfo[6][3]="0";
areaInfo[7] = 새로운 배열();
areaInfo[7][0]="8";
areaInfo[7][1]="민항";
areaInfo[7][2]="2";
지역정보[7][3]="0";
areaInfo[8] = 새로운 배열();
areaInfo[8][0]="9";
areaInfo[8][1]="칭푸";
areaInfo[8][2]="2";
지역정보[8][3]="0";
areaInfo[9] = 새로운 배열();
areaInfo[9][0]="10";
areaInfo[9][1]="홍커우";
areaInfo[9][2]="2";
지역정보[9][3]="0";
areaInfo[10] = 새 배열();
areaInfo[10][0]="11";
areaInfo[10][1]="자베이";
areaInfo[10][2]="2";
areaInfo[10][3]="0";
areaInfo[11] = 새 배열();
areaInfo[11][0]="12";
areaInfo[11][1]="푸투오";
지역정보[11][2]="2";
지역정보[11][3]="0";
areaInfo[12] = 새 배열();
지역정보[12][0]="13";
areaInfo[12][1]="양푸";
지역정보[12][2]="2";
지역정보[12][3]="0";
areaInfo[13] = 새 배열();
지역정보[13][0]="14";
areaInfo[13][1]="기타";
지역정보[13][2]="2";
지역정보[13][3]="0";

jquery.lyhucSelect.js
复aze代码 代码如下:

(function($) {
$.fn.lyhucSelect = function(options) {
var element = this;
var elementid = "#" element[0].id;
var 기본값 = {
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; (새로운 옵션);
}
});
})();
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'});
效果:

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.