我开发了一个简单的插件，允许您为文本框创建多列下拉菜单。您传入一个 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;
}