使用（this）和next（）修改函数，因此可以与许多元素集一起使用(Modify function using (this) and next() so can be used with many

使用（this）和next（）修改函数，因此可以与许多元素集一起使用(Modify function using (this) and next() so can be used with many sets of elements)

下面的函数使用jQuery UI MultiSelect Widget动态地将内容添加到多选元素（在此示例中，文本输入到#newItem并添加到＃example1，并基于此'Refresh'演示 。

我在100多个元素上使用它，因此希望修改函数，以便不需要为每个元素指定选择器。 我过去曾经使用过(this)和next() ，但是这个函数比我之前使用的函数稍微复杂一些，我不知道如何修改它以便使用相同的选择器整个表格。

我在这里发布了一个功能实例： http ： //jsfiddle.net/chayacooper/ezxSF/24/

JS

$(function () { var el = $("#example1").multiselect(), selected = $('#selected'), newItem = $('#newItem'); $("#add").click(function () { var v = newItem.val(), opt = $('<option />', { value: v, text: v }); if (selected.is(':checked')) { opt.attr('selected', 'selected'); } opt.appendTo(el); el.multiselect('refresh'); }); });

HTML

<div> <input type="text" id="newItem" /> <input type="button" id="add" value="Add" /> <label><input type="checkbox" id="selected" />Selected?</label> <select id="example1" name="example-refresh" class="multiselect" multiple="multiple"> <option value="foo">foo</option> <option value="bar">bar</option> </select> </div>

The function below dynamically adds content to a multi-select element using the jQuery UI MultiSelect Widget (in this example text is input into #newItem and added to #example1, and is based on this 'Refresh' demo.

I'm using this on 100+ elements and would therefore like to modify the function so that the selectors don't need to be specified for each element. I've used both (this) and next() in the past, but this function is a little more sophisticated than what I've worked with previously and I don't know how to modify it in order to use the same selectors for the entire form.

I've posted a working example of the function here: http://jsfiddle.net/chayacooper/ezxSF/24/

JS

$(function () { var el = $("#example1").multiselect(), selected = $('#selected'), newItem = $('#newItem'); $("#add").click(function () { var v = newItem.val(), opt = $('<option />', { value: v, text: v }); if (selected.is(':checked')) { opt.attr('selected', 'selected'); } opt.appendTo(el); el.multiselect('refresh'); }); });

HTML

<div> <input type="text" id="newItem" /> <input type="button" id="add" value="Add" /> <label><input type="checkbox" id="selected" />Selected?</label> <select id="example1" name="example-refresh" class="multiselect" multiple="multiple"> <option value="foo">foo</option> <option value="bar">bar</option> </select> </div>

最满意答案

改变这个：

<input type="button" id="add" value="Add" />

到了一个班级，所以我们有一个共同的起点

<input type="button" class="add" value="Add" />

然后做 ：

$(function () { $(".add").click(function () { var el = $(this).siblings('select').multiselect(), selected = $(this).siblings('label').find('input[type="checkbox"]'), newItem = $(this).prev('input'), v = newItem.val(), opt = $('<option />', { value: v, text : v }); if (selected.is(':checked')) { opt.prop('selected', true); } opt.appendTo(el); el.multiselect('refresh'); }); });

change this one:

<input type="button" id="add" value="Add" />

to a class, so we have a common starting point

<input type="button" class="add" value="Add" />

Then do :

$(function () { $(".add").click(function () { var el = $(this).siblings('select').multiselect(), selected = $(this).siblings('label').find('input[type="checkbox"]'), newItem = $(this).prev('input'), v = newItem.val(), opt = $('<option />', { value: v, text : v }); if (selected.is(':checked')) { opt.prop('selected', true); } opt.appendTo(el); el.multiselect('refresh'); }); });