0

以下の関数は、 jQuery UI MultiSelectウィジェットを使用してコンテンツを複数選択要素に動的に追加します（この例では、テキストは#newItemに入力され、＃example1に追加され、この「更新」デモに基づいています。

これを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 に答える