テキスト ボックスに複数列のドロップダウンを作成できるシンプルなプラグインを開発しました。Web サービス URL と、結果セットの各列から入力する各要素に対応する jQuery セレクターの配列を渡します。
$('#txtProduct').multiColumnDropDown({ 'url': '/api/GetProductAndCategoryByRegion', 'targets': ['#txtProduct', "#txtCategory"] });
これにより、複数列のドロップダウンが構築され、ユーザーがその中のレコードをクリックすると、#txtProduct と #txtCategory が入力されます。
すべてが正常に機能しますが、複数の multiColumnDropDowns を自分のページに適用できるようにしたいと考えています。プラグインのインスタンスに固有の動的に生成されたドロップダウン マークアップを参照する方法がわからないという問題が発生します。
私のプラグインでは、ドロップダウンのラッパーを生成し、必要な場所に配置します。再クエリによってラッパーとそのドロップダウンを更新したい場合、生成したすべてのラッパーではなく、必要なもののみを更新するにはどうすればよいですか?
以下の完全なコード:
(function ($) {
var methods = {
init: function (options) {
return this.each(function () {
var settings = $.extend({
'targets': [this]
}, options);
var targets = settings["targets"];
var yOffset = $(this).position().top + $(this).height() + 'px';
var xOffset = $(this).position().left + 'px';
var wrapper = $('<div class="dropdown-wrapper"></div>')
.css('top', yOffset)
.css('left', xOffset)
.hide();
$(document).click(function () {
wrapper.hide();
})
if (settings["url"] != undefined && settings["url"] != '') {
methods.populateDropDown(settings["url"], targets, wrapper);
}
$(this).click(function (e) {
e.stopPropagation();
wrapper.show();
});
});
},
update: function (options) {
return this.each(function () {
var settings = $.extend({
'targets': [this]
}, options);
var targets = settings["targets"];
//How do I reference the correct wrapper?
//The following will reference all wrappers on the page :\
var wrapper = $('div.dropdown-wrapper')
//Repopulate the wrapper and dropdown code goes here....
})
},
populateDropDown: function (url, targets, wrapper) {
$.ajax({
url: url,
type: 'get',
dataType: 'json'
})
.done(function (data) {
var $table = $('<table class="multi-column-table">');
data.forEach(function (item) {
var $tr = $('<tr>').appendTo($table);
var idx = 0;
$.each(item, function (k, v) {
var $td = $('<td>');
if (targets[idx] != undefined)
$td.attr('data-target', targets[idx]);
$td.text(v);
$td.appendTo($tr);
idx++;
});
});
$table.on('click', 'tr', function () {
$.each(this.children, function (i, td) {
if ($(td).attr('data-target'))
$($(td).attr('data-target')).val($(td).text());
});
});
$(wrapper).append($table).prependTo('body');
})
.fail(function (jqXHR, textStatus, errorThrown) {
alert('Error: ' + errorThrown);
});
}
};
$.fn.multiColumnDropDown = function (method) {
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method) {
return methods.init.apply(this, arguments);
} else {
$.error('Method ' + method + ' does not exist on jQuery.multiColumnDropDown');
}
};
})(jQuery);
また、CSS に興味がある場合は、次のようにします。
.dropdown-wrapper
{
border:1px solid #000;
border-bottom-right-radius:3px;
border-bottom-left-radius:3px;
z-index:100;
background-color:#fff;
position:absolute;
}
.dropdown-wrapper tr:hover
{
background-color:#0081C2;
color:#fff;
}