Question

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

我在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>

Answer 1

改变这个：

<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');
    });
});

使用（this）和next（）修改函数，因此可以与许多元素集一起使用

1 个答案: