1

Select2 ver4 jquery プラグインと Select2 サンプル ページの Loading remote data を使用して AJAX 呼び出しを実行しようとしています。select2 ツールを含む select のクローンを作成しようとしています。 質問 クローン選択の前に、良いアドバイザーによってすでに機能しています!!ありがとう!!

ただし、新しい AJAX(test.php) を使用すると、clone 要素が機能しません。

HTMLコード

<tr>
<td>
<select class="js-example-data-ajax" id="sel1">
</select>
</td>
<td>
<div class="hint">Get befor select value.</div>
</td>
<td>
<button type="button" class="addline">Add Line</button>
</td>
</tr>

jQuery コード

$.fn.select2.amd.require(
    ["select2/core", "select2/utils", "select2/compat/matcher"],
    function (Select2, Utils, oldMatcher) {
        var $ajax = $(".js-example-data-ajax");
        $ajax.select2({
        ajax: {
            url: "https://api.github.com/search/repositories",
            dataType: 'json',
            delay: 250,
            data: function (params) {
                return {
                    q: params.term // search term
                };
            },
            processResults: function (data, params) {
            params.page = params.page || 1;
            return {
                results: data
            };
        },
            cache: true
    },
    escapeMarkup: function (markup) { return markup; },
    minimumInputLength: 1,
  });
});

$(document).on('click', '.addline', function () {
    var $tr = $(this).closest('tr');
    var $lastTr = $tr.closest('table').find('tr:last');

    $lastTr.find('.js-example-data-ajax').select2('destroy');

    var $clone = $lastTr.clone(true);

    $clone.find('td').each(function() {
        var el = $(this).find(':first-child');
        var id = el.attr('id') || null;
        if (id) {
            var i = id.substr(id.length - 1);
            var prefix = id.substr(0, (id.length - 1));
            el.attr('id', prefix + (+i + 1));
            el.attr('name', prefix + (+i + 1));
        }
    });
    $tr.closest('tbody').append($clone);

    $(".js-example-data-ajax").select2({
      ajax: {
        url: "https://api.github.com/search/repositories",
        dataType: 'json',
        delay: 250,
        data: function (params) {
          return {
            q: params.term // search term
          };
        },
        processResults: function (data, params) {
          params.page = params.page || 1;

          return {
            results: data
          };
        },
        cache: true
      },
      escapeMarkup: function (markup) { return markup; },
      minimumInputLength: 1,
    });
// Don't work code from here
    $('.js-example-data-ajax').on("change",function() {
        $.get ('test.php',
            {da : $(this).val()},
            function (data) {
                $('.hint').html(data);
        });
    });
});
// Don't work code from here
$(document).ready(function(){
    $('.js-example-data-ajax').on("change",function() {
        $.get ('test.php',
            {da : $(this).val()},
            function (data) {
            $('.hint').html(data);
        });
    });
});

test.php コード

echo $_GET["da"];
4

1 に答える 1

0

ここで実際に求めている.hintのは、クリック イベントの行のターゲットに属する を取得することです。

$.getこれを行うには、まず成功のために使用する関数をグローバル変数として定義します。

var onSelectGetSuccess = function(element) {
  return function (data) {
   // fill in the .hint of the closest tr of our element
    $(element).closest('tr').find('.hint').html(data);
  }
}

次に、それを使用して、次のようにイベントを定義できます.on("change")(コード内の 2 つの場所に表示されることに注意してください)。

$('.js-example-data-ajax').on("change",function(e) {
    $.get ('test.php',
        {da : $(this).val()},
        onSelectGetSuccess(e.target))
});
于 2015-09-07T17:46:04.847 に答える