0

下面的函数使用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>
4

1 回答 1

0

改变这个：

<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');
    });
});
于 2013-03-26T21:18:19.110 回答