jquery_jquery に基づく無限カスケード ドロップダウン ボックス js プラグイン

柔軟性の点では、さまざまな側面が考慮されており、さまざまな環境での使用を容易にするためにいくつかの重要な構成が提供されており、ソース コードは完全にオープンです。このプラグインを開発した理由は、少し前に 4 レベルのカスケード ドロップダウン ボックスを維持することにイライラし、その中の 200 行のコード、複雑な構造、バグにイライラしていたからです (コードが多いのは、カスケード ドロップダウン ボックスが 2 つまたは 3 つしか表示されないためです。jquery にはこれほど優れたプラグインはないと考えられるため、自分で開発した方がよいでしょう。 。ソース コードは複雑ではありませんが、2 番目のプラグインでのキャッシュの使用が少し複雑なので、後で説明します。
プラグイン 1: サーバーとの AJAX 対話がない場合の使用に適しています。
プラグイン 2: 各子ドロップダウンに適しています。データ バインディングのためにサーバーに送信されるボックス。優れた点は、使用されたデータをキャッシュして高い効率を実現することです。 注: キャッシュされたキーの値は、親ドロップダウン ボックスの値だけでなく、最上位のドロップダウン ボックスからの値の組み合わせでもあります。現在の親ドロップダウン ボックス。これは、同じ親ドロップダウン ボックスに対応する子が同じではない状況に対処するためです。同じ理由で、ポストバックでサーバーに送り返されるフォームには、すべての親ドロップダウン ボックスの値も含まれます。

コードをコピー コードは次のとおりです:

/*
* カスケード ドロップダウン ボックス Jqueyr プラグイン、V1.2
* Copyright 2011, Leo.Liu
* このプラグインには、リフレッシュ不要のカスケード ドロップが 2 つ含まれています-ダウン ボックス プラグイン:
* プラグイン 1: cascadeDropDownData は、サーバーとの AJAX インタラクションがなく、すべてのドロップダウン ボックス データを事前に読み出す必要がある場合に使用されます。デモ:
* メソッド 1: var dataItem = [['all', '-1', '0'], ['a001', 'a001', '0'], ['a002', 'a002' , '0'], ['a003', 'a003', '0']
, ['b001', 'b001', 'a001'], ['b002', 'b002', 'a001'] , ['b003', 'b003', 'a002'], ['b004', 'b004', 'a003']
, ['c001', '001', 'b001'], ['c002' , '002', 'b001'], ['c003', '003', 'b002'], ['c004', '004', 'b003']];
$.cascadeDropDownBind.bind(dataItem, {sourceID: 'Select1'、selectValue: 'a001'、parentValue : '0'、
child: {sourceID: 'Select2'、selectValue: 'b002'、
child: {sourceID: 'Select3'、selectValue : 'c002'}
}
});
* このメソッドには次のような欠陥があります。 a) ドロップダウン ボックスの値は、親子対応における親の値と同じであってはなりません。 ) 全選択ルールは設定できません
*
* 方法 2: var data = [['all', '0'], ['a001', 'a001'], ['a002', ' a002'], ['a003', 'a003' ]];
var data2 = [['all', '0', '0'], ['b001', 'b001', 'a001'], ['b002', 'b002', 'a001' ], ['b003', 'b003', 'a002'], ['b004', 'b004', 'a003']]; ['すべて', '0', '0' ], ['c001', '001', 'b001'], ['c002', '002', 'b001'], ['c003', '003' , 'b002'], ['c004', ' 004', 'b003']]
$.cascadeDropDownBind.bind(data, {sourceID: 'Select1', selectValue: 'a001' }); $.cascadeDropDownBind.bind(data2, {sourceID: 'Select2', selectValue: 'b002',parentID: 'Select1' });
$.cascadeDropDownBind.bind(data3, {sourceID: 'Select3', selectValue: ' c002',parentID: 'Select2' });
* メソッド 3 については、cascadeDropDownBind.bind の内容を参照
*/
jQuery.extend({
//ドロップのデータ オブジェクト-down box
cascadeDropDownData: function () {
//*** ***構成プロパティ************
this.removeFirst = true; //最初の項目を削除します
this.appentAllValue = '' //親項目の値がこの値と等しい場合は、すべての項目を表示します
this.sourceID = '';
this.parentID = ''; //親ドロップダウン ボックス ID
this.items = [] //項目のデータ、2 次元配列、形式: [['text', 'value', '親 ID'],...]; 値と親 ID は省略できます。
this.selectValue = ''; // 選択した項目を初期化します。
this.parentValue = null;データの山からグループに必要な項目。通常、最初のドロップダウン ボックスをバインドするために使用されます
//**** **構成プロパティ*******
//以下は次のとおりですグローバル変数。外部から設定する必要はありません。
this.child = null;
var currentDrop = null;
this.bind = function () {
currentDrop = $('#' this.sourceID );
this.clear();
//データ項目を入力します
this.fillItem();
//選択された項目
if (this.selectValue) {
currentDrop .val(this.selectValue);
}
//親ドロップダウン ボックスの変更イベントを設定します
this.setChange();
}; items
this.clear = function () {
if (this.removeFirst) {
currentDrop.empty();
} else {
for (var i = currentDrop[0]. options.length - 1; i > 0; i--) {
currentDrop[0].options[i] = null;データ項目
this.fillItem = function () {
var _parentValue = this.parentValue;
if (this.parentID)
_parentValue = $( '#' this.parentID).val() ;
var all = false;
if (this.appentAllValue && _parentValue == this.appentAllValue)
all = true; this.items, function (index, item) {
var = item.length > 1 ? item[1] : item[0] //値が指定されていない場合は、代わりにテキストを使用します。
if (all || item.length <= 2 | | item[2] == _parentValue) { //長さが 3 未満の場合は、親ドロップダウン ボックスがないとみなされ、すべての項目が埋められます
currentDrop.append('' item[0] '');
}
}; // 親ドロップの変更イベントを設定します-down box
this.setChange = function () {
if (this.parentID) {
$('#' this.parentID).bind('change', this.change); >}
} ;
//親ドロップダウン ボックス イベント コールバック関数
var _this = this;
this.change = function () {
_this.clear(); >_this.fillItem();
currentDrop.change();
},
cascadeDropDownBind: {
var obj = new $.cascadeDropDownData();
$.extend(obj, 設定);
obj.bind();
if (setting.child) settings.child.parentID = 設定.sourceID
this.bind(data, settings.child)
}
});プラグイン 2: ajaxDropDownData は各子に適用されます。 レベルのドロップダウン ボックスは、データ バインディングのためにサーバーにポストされます。
* このプラグインの優れた点は、使用されたデータをキャッシュして高い効率を実現することです。
* 注: キャッシュされたキーの値は、親ドロップダウン ボックスの値だけではなく、最上位のドロップダウン ボックスから現在の親ドロップダウン ボックスまでの値の組み合わせです。同じ親ドロップダウン ボックスに対応する異なる子の出現
* 同じ理由で、ポストバックでサーバーに送り返されるフォームには、すべての親ドロップダウン ボックスの値も含まれます
>* 使用法:
var firstItems = null; //最初の項目を配置することもできます。ドロップダウン ボックスのデータ配列はバインドのためにここに配置されるか、空に設定されてドロップダウン ボックスは変更されません。
$.ajaxDropDownBind.bindTopDrop('Select1', firstItems, null, false, 'Select2');
$.ajaxDropDownBind.bindCallback('Select2', null, false, 'Select3', 'http:// localhost:4167/GetDropDownData.ashx?action=select1');
$.ajaxDropDownBind.bindCallback('Select3', null, false, null, 'http://localhost:4167/GetDropDownData.ashx?action=select2' );
$('#Select1').change();
* 最も重要なことは、カスケード ID 設定を省略できないことです。高度な使用方法については、$.ajaxDropDownBind.bindCallback メソッドを参照してください。
*/
jQuery.extend({
//このオブジェクトはリンクリスト構造です
ajaxDropDownData: function () {
//******設定プロパティ************
this.sourceID = ''; //このドロップダウン ボックス ID
this.items = [];この項目の 2 次元配列、形式: [['Text', 'Value', 'Parent ID'],...]; 値と親 ID は省略可能
this.callback = null; /Callback 関数。次の第 1 レベルのメソッドを取得するために使用されます。この関数は 2 つのパラメーターを受け取ります。value とdropdownlist はそれぞれ、親ドロップダウン ボックスとその独自のインスタンスによって選択された値を表します。
this.childID = ''; //関連付けられた子コントロール ID
this.removeFirst = true //この項目の最初のオプションを削除するかどうか
this.selectValue = ''; //この項目の選択された値を初期化します。 ******構成プロパティ**** ***
//***********************以下はシステム変数とメソッドです。 ****************** ******************************* ****
this.childItem = []; //キャッシュする子オブジェクトのリスト
this.parentObj = null; //親オブジェクト
this.canChange = true; true;
this.bind = function () {
$.ajaxDropDownBindData(this);
this.bindData = function (設定) {
$.extend(this) 、設定);
$.ajaxDropDownBind.bindData(this);
}
/*ルート ノードに戻り、現在の正しいドロップダウン ボックス オブジェクトを取得します。カスケード
ドロップダウン ボックスのイベントは 1 つだけであり、対応するオブジェクトが複数あるため、ここでは最初にルートに戻ってから、ルートから開始する必要があります
*/
this .getRightOnChangeObj = function () {
if (this.parentObj)
return this.parentObj.getRightOnChangeObj().childItem[$('#' this.parentObj.sourceID).val()]; //再帰
else
return this;
}
},
ajaxDropDownBind: {
currentDrop: null,
_thisData: null,
callbackPool: [],
// 入力された項目をクリアします
clear: function () {
if (_thisData.removeFirst) {
currentDrop.empty();
} else {
for (var i = currentDrop[0) ].options.length - 1; i > 0; i--) {
}
}
/ /Filling Data item
fillItem: function () {
for (var i = 0; i < _thisData.items.length; i ) {
var val = _thisData.items[i].length > ; 1 ? _thisData.items[i][1] : _thisData.items[i][0] //値が指定されていない場合は、代わりにテキストを使用します。
currentDrop.append('');
}
//選択した項目を設定します
if (_thisData.selectValue) {
currentDrop .val(_thisData .selectValue);
_thisData.selectValue = '';
}
},
//パラメータ データは、現在変更されているドロップダウン ボックスが配置されているオブジェクトを参照します。 🎜>bindData: function (data) {
_thisData = data;
currentDrop = $('#' _thisData.sourceID); //子の代わりにノード自体
if (_thisData.clearItem)
this.clear();
if (_thisData.items)
this.fillItem();
if (_thisData.childID) {
if (!currentDrop.data('binded') ) { // イベントがバインドされているかどうかを判断します。バインドされているイベントはバインドされなくなります。
currentDrop.data('binded', true); // 1 つだけなので、ドロップダウン ボックスのイベントであり、対応するオブジェクトが複数あるため、ここでのオブジェクトはバインド時のオブジェクトであり、正しいオブジェクトではありません
currentDrop.bind('change', function () {
var rightChildItem = _firstChangeObj.getRightOnChangeObj().childItem;
var thisValue = $('#' _firstChangeObj.sourceID).val(); // 現在変更されているドロップダウン ボックスの値を代わりに使用できないことに注意してください。 currentDrop も古い値であるため、
if (rightChildItem[thisValue]) {
console.log('cache')
rightChildItem[thisValue].bind(); // キャッシュされたデータを使用して
}
else {
console.log('getdata' );
//新しいインスタンスとリンク リスト関係を確立します
var dropData = new $.ajaxDropDownData(); dropData.sourceID = _firstChangeObj.childID;
dropData.parentObj = _firstChangeObj;
rightChildItem[thisValue] = dropData; // キャッシュを設定します
if (_firstChangeObj.callback) // コールバック関数がある場合は呼び出します直接それ以外の場合は、システムによって自動的に生成された関数を呼び出します
_firstChangeObj.callback(thisValue, dropData) ; //コールバック関数
else {
var callback = $.ajaxDropDownBind.callbackPool[dropData.sourceID];
if (コールバック)
callback(thisValue,dropData);
}
}
});
if (_thisData.canChange)
currentDrop.change ();
}
},
//最初のレベルのドロップダウンをバインドします Box
bindTopDrop: function (sourceID, items, selectValue, replaceFirst, childID) {
var mydrop = new $.ajaxDropDownData();
mydrop.sourceID = ソース ID;
if (!items || items.length == 0)
mydrop.clearItem = false; 🎜>mydrop.removeFirst = moveFirst;
mydrop.childID = childID;
mydrop.bind(); 🎜>//子ドロップダウン ボックスをバインドします
bindCallback: function (sourceID, selectValue,removeFirst, childID ,parentPostUrl) {
var callback = function (value,dropdownlist) {
var postData = {};
varparentObj =dropdownlist.parentObj;
while (parentObj) {
postData[parentObj.sourceID] = $('#'parentObj.sourceID).val(); parentObj;
}
$.getJSON(parentPostUrl '&jsoncallback=?', postData, function (data) {
dropdownlist.items = data;
dropdownlist.removeFirst = RemoveFirst;
ドロップダウンリスト。 selectValue = selectValue;
dropdownlist.bind();
}
this.callbackPool[sourceID] = コールバック; 🎜>}
});


使用法コードにコメントがあるため、詳細は説明しません。
添付ファイルの追加方法がわからないので、テストコードも載せておきます。プラグイン2はサーバーの協力が必要なため、ここではプラグイン2のテストコードは載せません。
プラグイン 1 テスト コード

コードをコピー

コードは次のとおりです:

无限极级联下拉框的封装

绑定方法：第一种方法
第二种方法

第一个下拉框：	设置当前项的选中值
第二个下拉框：	设置当前项的选中值	是否移除第一项	当前一项值等于此值时，该项全选
第三个下拉框：	设置当前项的选中值	是否移除第一项	当前一项值等于此值时，该项全选

下拉框结果：