ホームページ  >  記事  >  ウェブフロントエンド  >  lyhucSelect Jquery_jqueryに基づくデータ連携プラグインの選択

lyhucSelect Jquery_jqueryに基づくデータ連携プラグインの選択

WBOY
WBOYオリジナル
2016-05-16 18:08:481275ブラウズ

データソース:

复制代 代码如下:

var areaInfo = new Array();
areaInfo[0] = 新しい Array();
エリア情報[0][0]="1";
エリア情報[0][1]="北京";
エリア情報[0][2]="0";
エリア情報[0][3]="0";
areaInfo[1] = 新しい Array();
エリア情報[1][0]="2";
エリア情報[1][1]="上海";
エリア情報[1][2]="0";
エリア情報[1][3]="0";
areaInfo[2] = new Array();
エリア情報[2][0]="3";
エリア情報[2][1]="静安";
エリア情報[2][2]="2";
エリア情報[2][3]="0";
areaInfo[3] = 新しい Array();
エリア情報[3][0]="4";
areaInfo[3][1]="変更";
エリア情報[3][2]="2";
エリア情報[3][3]="0";
areaInfo[4] = 新しい Array();
エリア情報[4][0]="5";
エリア情報[4][1]="魯湾";
エリア情報[4][2]="2";
エリア情報[4][3]="0";
areaInfo[5] = 新しい Array();
エリア情報[5][0]="6";
エリア情報[5][1]="黄p";
エリア情報[5][2]="2";
エリア情報[5][3]="0";
areaInfo[6] = 新しい Array();
エリア情報[6][0]="7";
エリア情報[6][1]="浦東";
エリア情報[6][2]="2";
エリア情報[6][3]="0";
areaInfo[7] = 新しい Array();
エリア情報[7][0]="8";
エリア情報[7][1]="閔行";
エリア情報[7][2]="2";
エリア情報[7][3]="0";
areaInfo[8] = 新しい Array();
エリア情報[8][0]="9";
エリア情報[8][1]="青浦";
エリア情報[8][2]="2";
エリア情報[8][3]="0";
areaInfo[9] = 新しい Array();
エリア情報[9][0]="10";
エリア情報[9][1]="香港";
エリア情報[9][2]="2";
エリア情報[9][3]="0";
areaInfo[10] = 新しい Array();
エリア情報[10][0]="11";
エリア情報[10][1]="閘北";
エリア情報[10][2]="2";
エリア情報[10][3]="0";
areaInfo[11] = 新しい Array();
エリア情報[11][0]="12";
エリア情報[11][1]="普陀";
エリア情報[11][2]="2";
エリア情報[11][3]="0";
areaInfo[12] = 新しい Array();
エリア情報[12][0]="13";
エリア情報[12][1]="楊浦";
エリア情報[12][2]="2";
エリア情報[12][3]="0";
areaInfo[13] = 新しい Array();
エリア情報[13][0]="14";
エリア情報[13][1]="その他";
エリア情報[13][2]="2";
エリア情報[13][3]="0";

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

(function($) {
$.fn.lyhucSelect = function(options) {
var 要素 = 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();
(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); (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.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;
$(options.subSelect).append(newoption);
tmpDepth
}; >if(tmpDepth==0)
{
varparentoption = 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 までご連絡ください。