web-dev-qa-db-ja.com

select2 onchangeイベントは1回だけ機能します

JQueryのSelect2に問題があります。

ページがロードされたときに、検索結果をクリックすると、イベントonchangeが選択されてトリガーされますが、これは初めての場合のみです。

別の時間に検索しても、検索されません。

これが私のコードです（Ajaxベースの検索です）：

jQuery('#search_code').select2({
    'width': '600px',
    'tokenSeparators': [',', ' '],
    'closeOnSelect': false,
    'placeholder': 'scan or type a SKU or product or ESN',
    'minimumInputLength': 1,
    'ajax': {
        'url': 'lookProduct',
        'dataType': 'json',
        'type': 'POST',
        'data': function (term, page) {
            return {
                barcode: term,
                page_limit: 3,
                page: page
            };
        },
        'results': function (data, page) {
            return {
                results: data
            };
        }
    }
}).on('change', function (e) {
    var str = $("#s2id_search_code .select2-choice span").text();

    DOSelectAjaxProd(this.value, str);
    //this.value
}).on('select', function (e) {
    console.log("select");

});
jqueryeventsonchangejquery-select2
14
PartySoft

これは私が使用しているものです：

$("#search_code").live('change', function(){
  alert(this.value)
});

最新のjQueryユーザーの場合、これは動作するはずです。

$(document.body).on("change","#search_code",function(){
 alert(this.value);
});
23
Steel Brain

データを使用するときに選択が既に存在する場合、変更イベントは発生しないようです。問題を解決するために、選択時にデータを手動で更新することになりました。

$("#search_code").on("select2-selecting", function(e) {
    $("#search_code").select2("data",e.choice);
});

私はこれがかなり遅いことを知っていますが、うまくいけばこの答えが他の人の時間を節約できることを願っています。

10
Keith Muenze

バージョン4.0. の時点で、select2-selectingなどのイベントは機能しなくなりました。次のように名前が変更されます。

  • select2-closeがselect2：closeになりました
  • select2-openがselect2：openになりました
  • select2-openingはselect2：openingになりました
  • select2-selectingはselect2：selectingになりました
  • select2-removedはselect2：removedになりました
  • select2-removingはselect2：unselectingになりました

参照： https://select2.org/programmatic-control/events

(function($){
  $('.select2').select2();
  
  $('.select2').on('select2:selecting', function(e) {
    console.log('Selecting: ' , e.params.args.data);
  });
})(jQuery);
body{
  font-family: sans-serif;
}

.select2{
  width: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.min.js"></script>

<select class="select2" multiple="multiple">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
  <option value="4">Option 4</option>
  <option value="5">Option 5</option>
  <option value="6">Option 6</option>
  <option value="7">Option 7</option>
</select>
9
Nisarg
$('#search_code').select2({
.
.
.
.
}).on("change", function (e) {
      var str = $("#s2id_search_code .select2-choice span").text();
      DOSelectAjaxProd(e.val, str);
});
6
HamidReza

これは、アイテムIDが同じであるためです。選択時に異なるアイテムIDが検出された場合にのみ、変更時に起動します。

したがって、2つのオプションがあります。1つ目は、ajaxからデータを取得するときに、各アイテムに一意のIDを持たせることです。

2つ目は、選択したアイテムのformatSelectionでランド番号をトリガーすることです。

function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

。

formatSelection: function(item) {item.id =getRandomInt(1,200)}
6
cpugourou

.on特定のselect2イベントをチェックするリスナー。 「変更」イベントは通常と同じですが、その他はselect2コントロールに固有のものです。

  • 変化する
  • select2-opening
  • select2-open
  • select2-close
  • select2-highlight
  • select2-selecting
  • select2-removed
  • select2-loaded
  • select2-focus

名前は一目瞭然です。例えば、 select2-focusコントロールにフォーカスを与えると起動します。

2
Dradge

私のselect2要素はonchangeイベントを発生させていませんでした。ドロップダウンリストが提供する値は1つだけであったため、値を変更できませんでした。

値は変更されておらず、イベントは発生せず、ハンドラーは実行できませんでした。

次に、値をクリアする別のハンドラーを追加し、select2-openハンドラーは、onchangeハンドラーの前に実行されます。

ソースコードは次のようになります。

el.on("select2-open", function(e) {
    $(this).val('');
});
el.on('change', function() {
    ...
});

最初のハンドラーは値をクリアし、同じ値を選択した場合でも2番目のハンドラーが起動できるようにします。

1
Stephane