web-dev-qa-db-ja.com

AJAXを使用するjQuery Select2コントロールに項目を動的に追加します

AJAXを使用してデータを入力するjQuery Select2コントロールがあります。

<input type="text" name="select2" id="select2" style='width:400px' value="999">

var initialSelection = { id: '999', text:"Some initial option"};

$("#select2").select2({
    placeholder: "Select Option",
    minimumInputLength: 2,
    ajax: { 
        url: "/servletToGetMyData",
        dataType: 'json',
        data: function (term, page) { return { term: term }; },
        results: function (data, page) {  return { results: data.results} }
    },
    initSelection : function(element, callback){ callback(initialSelection); },     
    escapeMarkup: function (m) { return m; }
});

AJAXは可能なオプションのデータベースにリンクしており、ご覧のとおり、2文字の入力が必要です。

問題は、オプションがデータベースに存在しない場合、ユーザーがダイアログを使用して新しいオプションを追加できることです。そのダイアログから戻ったら、私は試してみます：

var o = $("<option/>", {value: newID, text: newText});
$('#select2').append(o);
$('#select2 option[value="' + newID + '"]').prop('selected',true);
$('#select2').trigger('change');

しかし、それは機能しません。同じ正確なコードは、非AJAX Select2ボックスに対して機能します。 $('#select2').select2("val", newID);を使用するなど、さまざまな代替手段を試しましたが、機能しません。

Select2コントロールを完全に削除してみました。ただし、$('#select2').remove()は元の<input>フィールドのみを削除し、Select2コントロールはそのまま残ります。ページには複数のSelect2コントロールがあるため、必要な他のコントロールを削除するため、Select2コントロールにはクラスセレクターを使用できません。

A）AJAXを使用するSelect2コントロールにオプションを動的に追加する方法。またはb）Select2コントロールを完全に削除して、プログラムで追加できるようにしますか？または他のソリューション...

編集 .select2（ "destroy"）を使用して、select2要素を削除する方法を示す別の質問を見つけました。これは機能しますが、私の意見では、最適ではありません。 select2を破棄して再作成するよりも、オプションを追加するだけの方がずっと好きです。

jqueryajaxjquery-select2
45
Bumptious Q Bangwhistle

これは簡単な解決策を提供しました： AJAXで挿入した後Select2にデータを設定します

$("#select2").select2('data', {id: newID, text: newText});
30
Bumptious Q Bangwhistle

これは、select2 v4から始める方がはるかに簡単です。 new Optionを作成し、select要素に直接追加できます。 codepen または以下の例を参照してください。

$(document).ready(function() {
    $("#state").select2({
      tags: true
    });
      
    $("#btn-add-state").on("click", function(){
      var newStateVal = $("#new-state").val();
      // Set the value, creating a new option if necessary
      if ($("#state").find("option[value=" + newStateVal + "]").length) {
        $("#state").val(newStateVal).trigger("change");
      } else { 
        // Create the DOM option that is pre-selected by default
        var newState = new Option(newStateVal, newStateVal, true, true);
        // Append it to the select
        $("#state").append(newState).trigger('change');
      } 
    });  
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/Twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/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/Twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script>


<select id="state" class="js-example-basic-single" type="text" style="width:90%">
  <option value="AL">Alabama</option>
  <option value="WY">Wyoming</option>
</select>
<br>
<br>
<input id="new-state" type="text" />
<button type="button" id="btn-add-state">Set state value</button>

ヒント：「AL」や「WY」などの既存の値をテキストボックスに入力してみてください。次に、いくつかの新しい値を追加してみてください。

39
alexw

Select2バージョン4+の場合

構文が変更されたため、次のように記述する必要があります。

// clear all option
$('#select_with_blank_data').html('').select2({data: [{id: '', text: ''}]});

// clear and add new option
$("#select_with_data").html('').select2({data: [
 {id: '', text: ''},
 {id: '1', text: 'Facebook'},
 {id: '2', text: 'Youtube'},
 {id: '3', text: 'Instagram'},
 {id: '4', text: 'Pinterest'}]});



//  append option
$("#select_with_data").append('<option value="5">Twitter</option>');
$("#select_with_data").val('5');
$("#select_with_data").trigger('change');
18
Sruit A.Suk

Select2 4.0.2で

$("#yourId").append("<option value='"+item+"' selected>"+item+"</option>");
$('#yourId').trigger('change');
17
Digvijay

このリンクの助けを借りて問題を解決しました http://www.bootply.com/122726 。うまくいけばあなたを助けるでしょう

Select2 jqueryにオプションを追加し、バックエンドからの新しいオプション用に作成されたリンクID（#addNew）でajax呼び出しをバインドします。そしてコード

 $.getScript('http://ivaynberg.github.io/select2/select2-3.4.5/select2.js',function(){

  $("#mySel").select2({
    width:'240px',
    allowClear:true,
    formatNoMatches: function(term) {
        /* customize the no matches output */
        return "<input class='form-control' id='newTerm' value='"+term+"'><a href='#' id='addNew' class='btn btn-default'>Create</a>"
    }
  })
  .parent().find('.select2-with-searchbox').on('click','#addNew',function(){
    /* add the new term */
    var newTerm = $('#newTerm').val();
    //alert('adding:'+newTerm);
    $('<option>'+newTerm+'</option>').appendTo('#mySel');
    $('#mySel').select2('val',newTerm); // select the new term
    $("#mySel").select2('close');       // close the dropdown
  })

});



<div class="container">
    <h3>Select2 - Add new term when no search matches</h3>
    <select id="mySel">
        <option>One</option>
        <option>Two</option>
        <option>Three</option>
        <option>Four</option>
        <option>Five</option>
        <option>Six</option>
        <option>Twenty Four</option>
    </select>
    <br>
    <br>
</div>
10
Suneel

Bumptious Q Bangwhistleの答えを拡張する：

$('#select2').append($('<option>', { 
    value: item,
    text : item 
})).select2();

これにより、新しいオプションが<select>タグに追加され、select2で再レンダリングできます。

5
hareluya86

私はこの方法でそれをしました、そして、それは魅力のように私のために働きました。

var data = [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, 

    text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }];

    $(".js-example-data-array").select2({
      data: data
    })
3
Chaudhry Waqas
$("#my_select").select2('destroy').empty().select2({data: [{id: 1, text: "new_item"}]});
2
Musznik

動的タグ付けをajaxで機能させるために、私がやったことは次のとおりです。

Select2バージョン3.5

これはcreateSearchChoiceフックを提供するため、バージョン3.5では簡単です。 multiple: trueおよびtags: trueが設定されている限り、複数選択に対しても機能します。

HTML

<input type="hidden" name="locations" value="Whistler, BC" />

JS

$('input[name="locations"]').select2({
  tags: true,
  multiple: true,
  createSearchChoice: function(term, data) {
    if (!data.length)
      return { id: term, text: term };
    },
  ajax: {
    url: '/api/v1.1/locations',
    dataType: 'json'
  }
});

ここでのアイデアは、ユーザーが入力したcreateSearchChoiceとajax応答（termとして）の両方を渡すselect2のdataフックを使用することです。 ajaxが空のリストを返す場合、select2にユーザー入力termをオプションとして提供するように指示します。

デモ： https://johnny.netlify.com/select2-examples/version


Select2バージョン4.X

バージョン4.XにはcreateSearchChoiceフックがありませんが、ここで同じことを行いました。

HTML

  <select name="locations" multiple>
    <option value="Whistler, BC" selected>Whistler, BC</option>
  </select>

JS

$('select[name="locations"]').select2({
  ajax: {
    url: '/api/v1.1/locations',
    dataType: 'json',
    data: function(params) {
      this.data('term', params.term);
      return params;
    },
    processResults: function(data) {
      if (data.length)
        return {
          results: data
        };
      else
        return {
          results: [{ id: this.$element.data('term'), text: this.$element.data('term') }]
        };
    }
  }
});

アイデアは、ユーザーがselect2のdataフック内のjQueryのデータストアに入力した用語を隠蔽することです。次に、select2のprocessResultsフックで、ajax応答が空かどうかを確認します。そうである場合、ユーザーが入力した隠された用語を取得し、select2のオプションとして返します。

デモ： https://johnny.netlify.com/select2-examples/version4

0
Johnny Oshika