jquery select2の選択された値を設定するにはどうすればよいですか？

98

これは、select2バージョン4より前のコードに属しています

私はselect2ajaxからデータを取得する簡単なコードを持っています

$("#programid").select2({
  placeholder: "Select a Program",
  allowClear: true,
  minimumInputLength: 3,
  ajax: {
    url: "ajax.php",
    dataType: 'json',
    quietMillis: 200,
    data: function (term, page) {
      return {
        term: term, //search term
        flag: 'selectprogram',
        page: page // page number
      };
    },
    results: function (data) {
      return {results: data};
    }
  },
  dropdownCssClass: "bigdrop",
  escapeMarkup: function (m) { return m; }
});

このコードは機能していますが、編集モードの場合と同じようにコードに値を設定する必要があります。ユーザーが最初に値を選択すると、その値が保存されます。その値を編集する必要がある場合は、同じ選択メニュー（select2）に表示して、以前に選択した値を選択する必要がありますが、方法が見つかりません。

更新：

HTMLコード：

<input type="hidden" name="programid" id="programid" class="width-500 validate[required]">

Select2プログラムによるアクセスは、これでは機能しません。

javascript  php  jquery  ajax  jquery-select2 
— ClearBoth
ソース
htmlで選択した値を設定するか、使用することができるはずです$("#programid").val()
— Explosion Pills
@ExplosionPills負、私も空白の値を取得しようとしました。programid.val（）をどのように使用すればよいですか？サーバーから値を取得した後、select2のこの非表示フィールドに値を設定する必要があります。
— ClearBoth 2014
@ClearBoth私があなたの意味を理解できるかどうかわからない。Select2コンポーネントの「選択された」値をAJAXが取得した結果の1つに設定しようとしていますか？
— ファン
@AnPhanはい、それを行う方法はありますか？
— ClearBoth 2014
@ClearBothあります。以下の私の答えを確認してください。
— ファンファン2014

回答:

61

Select2コンポーネントの「選択された」値を動的に設定するには：

$('#inputID').select2('data', {id: 100, a_key: 'Lorem Ipsum'});

2番目のパラメーターは、期待される値を持つオブジェクトです。

更新：

これは機能しますが、新しいselect2では、「a_key」は標準のselect2オブジェクトの「テキスト」であることに注意してください。そう：{id: 100, text: 'Lorem Ipsum'}

例： 

$('#all_contacts').select2('data', {id: '123', text: 'res_data.primary_email'});

@NoobishProのおかげで

— ファン
ソース
1
select2（ 'val'、 '1'）のIDだけで試してみましたが、うまくいきませんでした。ありがとう
— ClearBoth
6
これは機能しますが、新しいselect2では、標準のselect2オブジェクトの「a_key」が「text」であることに注意してください。so：{id：100、text： 'Lorem
— Ipsum
2
ここv4でも同じです。これで髪を抜いてる。JavaScriptソリューションに行かなければ、それは不可能だと思います。別のjQuery / Bootstrap Select2ドロップダウンを今すぐ探します（考えられるすべてのメソッドを2日間いじる-喜びがない！）
— MC9000
29
Select2 v4：select2.github.io/…を$('#inputID').val(100).trigger('change') 参照
— Paul
@NoobishPro＆アンファンティエット-回答＆コメントをありがとう
— Sinto
104

SELECT2 <V4

ステップ1：HTML

<input name="mySelect2" type="hidden" id="mySelect2">

ステップ2：Select2のインスタンスを作成する

$("#mySelect2").select2({
      placeholder: "My Select 2",
      multiple: false,
      minimumInputLength: 1,
      ajax: {
          url: "/elements/all",
          dataType: 'json',
          quietMillis: 250,
          data: function(term, page) {
              return {
                  q: term,
              };
          },
          results: function(data, page) {
              return {results: data};
          },
          cache: true
      },
      formatResult: function(element){
          return element.text + ' (' + element.id + ')';
      },
      formatSelection: function(element){
          return element.text + ' (' + element.id + ')';
      },
      escapeMarkup: function(m) {
          return m;
      }
});

ステップ3：必要な値を設定する

$("#mySelect2").select2('data', { id:"elementID", text: "Hello!"});

AJAXなしでselect2を使用する場合は、次のように実行できます。

<select name="mySelect2" id="mySelect2">
  <option value="0">One</option>
  <option value="1">Two</option>
  <option value="2">Three</option>
</select>
/* "One" will be the selected option */
$('[name=mySelect2]').val("0");

あなたもそうすることができます：

$("#mySelect2").select2("val", "0");

SELECT2 V4

SELECT2 V4あなたが直接オプションを追加することができます/以下の通りです：

<select id="myMultipleSelect2" multiple="" name="myMultipleSelect2[]">
    <option value="TheID" selected="selected">The text</option>                                                                   
</select>

またはjQueryを使用：

var $newOption = $("<option selected='selected'></option>").val("TheID").text("The text")
 
$("#myMultipleSelect2").append($newOption).trigger('change');

他の例

$("#myMultipleSelect2").val(5).trigger('change');
— トムプロド
ソース
3
トリガー（ '変更'）; 重要な部分です
— mihkov
$（ "＃mySelect2"）。select2（ "val"、 "0"）-これにより、値が変更されたjqueryイベントがトリガーされます。これを防ぐ方法。通常、ユーザーがフォームを送信すると、完了後にすべてのフォームデータがリセットされます。リセットはselect2をリセットしません。select2（ "val"、 "0"）を使用すると、ユーザーからのアクションがないためにクレイジーな変更がトリガーされます。
— ジャンパーrbk
— Ryan
.trigger（ 'change'）の表彰
— JP Dolocanog
23

HTML：

<select id="lang" >
   <option value="php">php</option>
   <option value="asp">asp</option>
   <option value="java">java</option>
</select>

JavaScript：

$("#lang").select2().select2('val','asp');

jsfiddle

— アフマド・タローネ
ソース
2
valではなくテキストで設定する方法
— Rizwan Patel
問題は、AJAX呼び出しでロードした後にこれを行う方法でした。この場合、この回答は機能しません。
— MC9000
これにより、select2値の変更がトリガーされます。これは、このイベントを処理する必要がある場合は奇妙であり、ユーザーが実行することなくトリガーされます
— ジャンパーrbk
17

また、試しましたが、select2でajaxを使用すると、select2で新しい値を設定するためのプログラム制御メソッドが機能しません！今、私は問題を解決するためにこれらのコードを書きます：

$('#sel')
    .empty() //empty select
    .append($("<option/>") //add option tag in select
        .val("20") //set value for option to post it
        .text("nabi")) //set a text for show in select
    .val("20") //select option of select2
    .trigger("change"); //apply to select2

次のリンクで完全なサンプルコードをテストできます：https :
//jsfiddle.net/NabiKAZ/2g1qq26v/32/このサンプルコードにはajax select2があり、ボタンで新しい値を設定できます。

コードスニペットを表示

— ナビKAZ
ソース
私は別のdisplayKeyやその他のものを使用しています（ただし、悪い考えでした）-これは、Codeceptionでの受け入れテストに完全に役立ちます
— MonkeyMonkey
2
確かに退屈ですが、だれもがSelect2 v4を見つけているように、デフォルトの選択を設定する
— ほどに途方
この答えがselect2 v4-ajax selectを作成する唯一の方法であることがわかりました。
13 
var $option = $("<option selected></option>").val('1').text("Pick me");

$('#select_id').append($option).trigger('change');

この追加を試してから選択します。AJAX呼び出し時にオプションを複製しません。

— ジグズ
ソース
var $ option = $（ "<option selected> </ option>"）。val（ '1'）。text（ "Pick me"）; $（ '＃select_id'）。append（$ option）.trigger（ 'change'）;
— ジグズ2016年
ありがとう。バージョン4.0.0で動作確認済み（ajax呼び出し）
— khalil 2018年
もう1つは、バージョン4でのajaxの成功を確認したものです。
— コーダー、
ajaxで検索可能なボックスを使用している場合、これは適切なソリューションです。これは2019
— Eric Skiff
12

私はこれが好きでした

$("#drpServices").select2().val("0").trigger("change");
— 芦ノ
ソース
2
ユーザーがコードがどのように機能するかを理解し、OPの質問に答えるのに役立つ説明を提供してください。
— Ivan
@Ivan、私はこのようにしていた$（ "＃drpServices"）。val（ "0"）; select2ドロップダウンで税を選択しないため、値とテキストの両方に影響を与えるため、select2のトリガー変更機能が必要です。これは私にとって完璧に機能しています。ユーザーに理解してもらいたい。
— 芦ノ市
9

上の現在のバージョンではselect2- v4.0.1あなたはこのような値を設定することができます。

var $example = $('.js-example-programmatic').select2();
$(".js-programmatic-set-val").on("click", function () { $example.val("CA").trigger("change"); });

// Option 2 if you can't trigger the change event.
var $exampleDestroy = $('.js-example-programmatic-destroy').select2();
$(".js-programmatic-set-val").on("click", function () { $exampleDestroy.val("CA").select2('destroy').select2(); });
<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.1/js/select2.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" rel="stylesheet" />

using "trigger(change)"
<select class="js-example-programmatic">
  <optgroup label="Alaskan/Hawaiian Time Zone">
    <option value="AK">Alaska</option>
    <option value="HI">Hawaii</option>
  </optgroup>
  <optgroup label="Pacific Time Zone">
    <option value="CA">California</option>
    <option value="NV">Nevada</option>
    <option value="OR">Oregon</option>
    <option value="WA">Washington</option>
  </optgroup>
  <optgroup label="Mountain Time Zone">
    <option value="AZ">Arizona</option>
    <option value="CO">Colorado</option>
    <option value="ID">Idaho</option>
    <option value="MT">Montana</option>
    <option value="NE">Nebraska</option>
    <option value="NM">New Mexico</option>
    <option value="ND">North Dakota</option>
    <option value="UT">Utah</option>
    <option value="WY">Wyoming</option>
  </optgroup>
  <optgroup label="Central Time Zone">
    <option value="AL">Alabama</option>
    <option value="AR">Arkansas</option>
    <option value="IL">Illinois</option>
    <option value="IA">Iowa</option>
    <option value="KS">Kansas</option>
    <option value="KY">Kentucky</option>
    <option value="LA">Louisiana</option>
    <option value="MN">Minnesota</option>
    <option value="MS">Mississippi</option>
    <option value="MO">Missouri</option>
    <option value="OK">Oklahoma</option>
    <option value="SD">South Dakota</option>
    <option value="TX">Texas</option>
    <option value="TN">Tennessee</option>
    <option value="WI">Wisconsin</option>
  </optgroup>
  <optgroup label="Eastern Time Zone">
    <option value="CT">Connecticut</option>
    <option value="DE">Delaware</option>
    <option value="FL">Florida</option>
    <option value="GA">Georgia</option>
    <option value="IN">Indiana</option>
    <option value="ME">Maine</option>
    <option value="MD">Maryland</option>
    <option value="MA">Massachusetts</option>
    <option value="MI">Michigan</option>
    <option value="NH">New Hampshire</option>
    <option value="NJ">New Jersey</option>
    <option value="NY">New York</option>
    <option value="NC">North Carolina</option>
    <option value="OH">Ohio</option>
    <option value="PA">Pennsylvania</option>
    <option value="RI">Rhode Island</option>
    <option value="SC">South Carolina</option>
    <option value="VT">Vermont</option>
    <option value="VA">Virginia</option>
    <option value="WV">West Virginia</option>
  </optgroup>
</select>

using destroy: 
<select class="js-example-programmatic">
  <optgroup label="Alaskan/Hawaiian Time Zone">
    <option value="AK">Alaska</option>
    <option value="HI">Hawaii</option>
  </optgroup>
  <optgroup label="Pacific Time Zone">
    <option value="CA">California</option>
    <option value="NV">Nevada</option>
    <option value="OR">Oregon</option>
    <option value="WA">Washington</option>
  </optgroup>
  <optgroup label="Mountain Time Zone">
    <option value="AZ">Arizona</option>
    <option value="CO">Colorado</option>
    <option value="ID">Idaho</option>
    <option value="MT">Montana</option>
    <option value="NE">Nebraska</option>
    <option value="NM">New Mexico</option>
    <option value="ND">North Dakota</option>
    <option value="UT">Utah</option>
    <option value="WY">Wyoming</option>
  </optgroup>
  <optgroup label="Central Time Zone">
    <option value="AL">Alabama</option>
    <option value="AR">Arkansas</option>
    <option value="IL">Illinois</option>
    <option value="IA">Iowa</option>
    <option value="KS">Kansas</option>
    <option value="KY">Kentucky</option>
    <option value="LA">Louisiana</option>
    <option value="MN">Minnesota</option>
    <option value="MS">Mississippi</option>
    <option value="MO">Missouri</option>
    <option value="OK">Oklahoma</option>
    <option value="SD">South Dakota</option>
    <option value="TX">Texas</option>
    <option value="TN">Tennessee</option>
    <option value="WI">Wisconsin</option>
  </optgroup>
  <optgroup label="Eastern Time Zone">
    <option value="CT">Connecticut</option>
    <option value="DE">Delaware</option>
    <option value="FL">Florida</option>
    <option value="GA">Georgia</option>
    <option value="IN">Indiana</option>
    <option value="ME">Maine</option>
    <option value="MD">Maryland</option>
    <option value="MA">Massachusetts</option>
    <option value="MI">Michigan</option>
    <option value="NH">New Hampshire</option>
    <option value="NJ">New Jersey</option>
    <option value="NY">New York</option>
    <option value="NC">North Carolina</option>
    <option value="OH">Ohio</option>
    <option value="PA">Pennsylvania</option>
    <option value="RI">Rhode Island</option>
    <option value="SC">South Carolina</option>
    <option value="VT">Vermont</option>
    <option value="VA">Virginia</option>
    <option value="WV">West Virginia</option>
  </optgroup>
</select>

<button class="js-programmatic-set-val">set value</button>
スニペットを展開

— Mosh Feu
ソース
変更イベントをトリガーせずに値を設定するにはどうすればよいですか？changeイベントは、ユーザーが手動で値を変更するときに使用する独自のイベントハンドラーをトリガーします。
— enumag 2016
他のオプションは、にあるdestroy。..更新されたコードを参照してください。..もう一度、再呼び出しプラグイン
— モッシュFEU
最初にselect2に渡したオプションを取得して、複製する必要がないようにする方法はありますか？とにかく、このソリューションはハックのようです。
— enumag 2016
確かにそれはハッチです。ドキュメントによる公式の方法は、変更イベントをトリガーすることです。so that I wouldn't have to duplicate themなぜそれらを複製しなければならないのですか？あなたがdestroyするときselect、彼のすべてでまだそこにありoptionsます。
— Mosh Feu、2016
select2に渡されるオプションを意味しました：$example.select2({ ... this ... })
— enumag
6

Ajaxの場合はを使用します$(".select2").val("").trigger("change")。これで問題は解決します。

— サブ
ソース
6

initSelection機能が必要だと思います

$("#programid").select2({
  placeholder: "Select a Program",
  allowClear: true,
  minimumInputLength: 3,
  ajax: {
    url: "ajax.php",
    dataType: 'json',
    quietMillis: 200,
    data: function (term, page) {
      return {
        term: term, //search term
        flag: 'selectprogram',
        page: page // page number
      };
    },
    results: function (data) {
      return {results: data};
    }
  },
  initSelection: function (element, callback) {
    var id = $(element).val();
    if (id !== "") {
      $.ajax("ajax.php/get_where", {
        data: {programid: id},
        dataType: "json"
      }).done(function (data) {
        $.each(data, function (i, value) {
          callback({"text": value.text, "id": value.id});
        });
        ;
      });
    }
  },
  dropdownCssClass: "bigdrop",
  escapeMarkup: function (m) { return m; }
});
— アフマド・タローネ
ソース
これは機能しています。ただし、バージョン4.0の時点で推奨されていません
— VisualBean '18
3 
    $("#select_location_id").val(value);
    $("#select_location_id").select2().trigger('change');

この簡単なコードで問題を解決しました。#select_location_idは選択ボックスのIDで、valueはselect2ボックスにリストされているオプションの値です。

— ヌマン・パサン
ソース
2

ファンの答えは私にとってうまくいきました：

$('#inputID').select2('data', {id: 100, a_key: 'Lorem Ipsum'});

しかし、変更を追加するとイベントがトリガーされます

$('#inputID').select2('data', {id: 100, a_key: 'Lorem Ipsum'}).change();
— アンドレス・ロドリゲス
ソース
1
このようにすると、「Uncaught TypeError：$（...）。select2（...）。change is not a function（…）」というエラーが表示されます。Select2のバージョン4.xでは可能ではないと思います-ここではajaxでは機能しません。
— MC9000
2

あなたはこのコードを使うことができます：

$("#programid").val(["number:2", "number:3"]).trigger("change");

「number：2」の2と「number：3」の3は、オブジェクト配列のidフィールドです。

— ハミドレザ
ソース
1

時々、select2()最初にロードされ、コントロールが以前に選択された値を正しく表示しないようにします。数秒の遅延を設けることで、この問題を解決できます。

setTimeout(function(){                  
    $('#costcentreid').select2();               
},3000);
— プオルニマ
ソース
0

select2 ajaxドロップダウンで要素をプリセットするために、このようなことをしました

      //preset element values
        $(id).val(topics);
       //topics is an array of format [{"id":"","text":""}, .....]
          setTimeout(function(){
           ajaxTopicDropdown(id,
                2,location.origin+"/api for gettings topics/",
                "Pick a topic", true, 5);                      
            },1);
        // ajaxtopicDropdown is dry fucntion to get topics for diffrent element and url
— アジート・ラカーニ
ソース
0

あなたは使うべきです：

var autocompleteIds= $("#EventId");
autocompleteIds.empty().append('<option value="Id">Text</option>').val("Id").trigger('change');

// For set multi selected values
var data =  [];//Array Ids
var option =  [];//Array options of Ids above
autocompleteIds.empty().append(option).val(data).trigger('change');

// Callback handler that will be called on success
request.done(function (response, textStatus, jqXHR) {
    // append the new option
    $("#EventId").append('<option value="' + response.id + '">' + response.text + '</option>');

    // get a list of selected values if any - or create an empty array
    var selectedValues = $("#EventId").val();
    if (selectedValues == null) {
        selectedValues = new Array();
    }
    selectedValues.push(response.id);   // add the newly created option to the list of selected items
    $("#EventId").val(selectedValues).trigger('change');   // have select2 do it's thing
});
— Xmanクラシック
ソース
0

入力ボックスを使用している場合は、「複数」プロパティに値を「true」に設定する必要があります。例えば、

<script>
    $(document).ready(function () {

        var arr = [{ id: 100, text: 'Lorem Ipsum 1' },
            { id: 200, text: 'Lorem Ipsum 2'}];

        $('#inputID').select2({
            data: arr,
            width: 200,
            multiple: true
        });
    });
</script>
— アルン・バニック
ソース
0

select2 < version4オプションがありinitSelection()、編集モードのように入力するための初期値を設定することができる、それを通してリモートデータローディング用。

$("#e6").select2({
    placeholder: "Search for a repository",
    minimumInputLength: 1,
    ajax: { 
        // instead of writing the function to execute the request we use Select2's convenient helper
        url: "https://api.github.com/search/repositories",
        dataType: 'json',
        quietMillis: 250,
        data: function (term, page) {
            return {
                q: term, // search term
            };
        },
        results: function (data, page) {
            // parse the results into the format expected by Select2.
            // since we are using custom formatting functions we do not need to alter the remote JSON data
            return { results: data.items };
        },
        cache: true
    },
    initSelection: function(element, callback) {
        // the input tag has a value attribute preloaded that points to a preselected repository's id
        // this function resolves that id attribute to an object that select2 can render
        // using its formatResult renderer - that way the repository name is shown preselected
        var id = $(element).val();
        if (id !== "") {
            $.ajax("https://api.github.com/repositories/" + id, {
                dataType: "json"
            }).done(function(data) { callback(data); });
        }
    },
    formatResult: repoFormatResult, // omitted for brevity, see the source of this page
    formatSelection: repoFormatSelection,  // omitted for brevity, see the source of this page
    dropdownCssClass: "bigdrop", // apply css that makes the dropdown taller
    escapeMarkup: function (m) { return m; } // we do not want to escape markup since we are displaying html in results
});

ソースドキュメント：Select2-3.5.3

— サイラム・スレシュ
ソース
0

私と同じ問題が発生した可能性のある人に追加するだけです。

（AJAXから）動的に読み込まれたオプションの選択されたオプションを設定しようとしていて、いくつかのロジックに応じて、選択されたオプションの1つを設定しようとしました。

私の問題は、名前と一致する値ではなく、値と一致する必要があるIDに基づいて選択したオプションを設定しようとしていないために発生しました！

— グレン
ソース
0

このような複数の値の場合：

$("#HouseIds").select2("val", @Newtonsoft.Json.JsonConvert.SerializeObject(Model.HouseIds));

これはこのようなものに変換されます

$("#HouseIds").select2("val", [35293,49525]);
— ロバート・ベンイ
ソース
0

これは、編集のためにデータをロードしているときに、誰かがAJAXからselect2データをロードするのに役立つ場合があります（単一選択または複数選択に適用可能））：

フォーム/モデルの読み込み中：

  $.ajax({
        type: "POST",
        ...        
        success: function (data) {
          selectCountries(fixedEncodeURI(data.countries));
         }

Select2のデータを選択するための呼び出し：

var countrySelect = $('.select_country');
function selectCountries(countries)
    {
        if (countries) {
            $.ajax({
                type: 'GET',
                url: "/regions/getCountries/",
                data: $.param({ 'idsSelected': countries }, true),

            }).then(function (data) {
                // create the option and append to Select2                     
                $.each(data, function (index, value) {
                    var option = new Option(value.text, value.id, true, true);
                    countrySelect.append(option).trigger('change');
                    console.log(option);
                });
                // manually trigger the `select2:select` event
                countrySelect.trigger({
                    type: 'select2:select',
                    params: {
                        data: data
                    }
                });
            });
        }
    }

エンコーディングに問題がある場合は、必要に応じて変更できます。

function fixedEncodeURI(str) {
        return encodeURI(str).replace(/%5B/g, '[').replace(/%5D/g, ']').replace(/%22/g,"");

    }
— カムランウルハック
ソース
0

呼び出す前に、ajaxから値を取得している場合 

$("#select_location_id").val(value);
$("#select_location_id").select2().trigger('change');
スニペットを展開

次の場合にjquery関数を使用して、ajax呼び出しが完了したことを確認します。

$.when(ajax1(), ajax2(), ajax3(), ajax4()).done(function(a1, a2, a3, a4){
      // the code here will be executed when all four ajax requests resolve.
      // a1, a2, a3 and a4 are lists of length 3 containing the response text,
      // status, and jqXHR object for each of the four ajax calls respectively.
    });
スニペットを展開
ここで説明されているように[ すべてのjQuery Ajaxリクエストが完了するまで待ちますか？

— ビクター・ムワンギ
ソース
0

@tomloprodの答えの上に構築する。x-editableを使用していて、select2（v4）フィールドがあり、事前に選択する必要のある複数のアイテムがあるという奇妙な偶然です。次のコードを使用できます。

$("#select2field").on("shown", function(e, editable){
    $(["test1", "test2", "test3", "test4"]).each(function(k, v){
        // Create a DOM Option and pre-select by default~
        var newOption = new Option(v.text, v.id, true, true);
        // Append it to the select
        $(editable.input.$input).append(newOption).trigger('change');
     });
});

そしてここでそれは動作しています：

var data = [
{
    id: 0,
    text: 'enhancement'
},
{
    id: 1,
    text: 'bug'
},
{
    id: 2,
    text: 'duplicate'
},
{
    id: 3,
    text: 'invalid'
},
{
    id: 4,
    text: 'wontfix'
}
];

$("#select2field").editable({
        type: "select2",
        url: './',
        name: 'select2field',
        savenochange: true,
        send: 'always',
        mode: 'inline',
        source: data,
        value: "bug, wontfix",
        tpl: '<select style="width: 201px;">',
        select2: {
            width: '201px',
            tags: true,
            tokenSeparators: [',', ' '],
            multiple: true,
            data:data
        },
        success: function(response, newValue) {
            console.log("success")
        },
        error: function(response, newValue) {
            if (response.status === 500) {
                return 'Service unavailable. Please try later.';
            } else {
                return response.responseJSON;
            }
        }
    });

var preselect= [
    {
        id: 1,
        text: 'bug'
    },
    {
    id: 4,
    text: 'wontfix'
}
];

 $("#select2field").on("shown", function(e, editable){
    $(preselect).each(function(k, v){
        // Create a DOM Option and pre-select by default~
        var newOption = new Option(v.text, v.id, true, true);
        // Append it to the select
        $(editable.input.$input).append(newOption).trigger('change');
     });
});
<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.1/js/select2.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" rel="stylesheet" />

<link href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/js/bootstrap-editable.min.js"></script>

<a id="select2field">bug, wontfix</a>
スニペットを展開

これは、x-editableを使用していなくても機能すると思います。私はhtisが誰かを助けることを望みます。

— レニアー
ソース
0

次のコードを使用できます。

    $('#country').select2("val", "Your_value").trigger('change');

Your_valueの代わりに目的の値を入力してください

それがうまくいくことを願っています:)

— ソリューションスピリット
ソース
-2

素敵で簡単：

document.getElementById("select2-id_city-container").innerHTML = "Your Text Here";

そして、あなたは変わります id_city、選択のIDにします。

編集：グレンのコメントの後、私はそれが私にとってなぜそしてどのように機能したのかを説明する必要があることに気づきました：

私はselect2自分のフォームにとてもよく働きました。私が作業できなかった唯一のことは、編集時に現在選択されている値を表示することでした。サードパーティのAPIを検索して、新しいレコードを保存し、古いレコードを編集していました。しばらくして、ユーザーがフィールドを変更しないと何も起こらないため、値を正しく設定する必要はなく、フィールド内のラベルのみを設定する必要があることに気付きました。多くの人を探して苦労して調べた結果、純粋なJavascriptで作成することにしました。うまくいったので、誰かを助けるために投稿しました。また、タイマーを設定することをお勧めします。

— ボナフェルナンド
ソース
この答えは、値を正しく設定することさえできない恐ろしいハックです。
— グレン
私はそのことについて申し訳ありません。回答を編集して、投稿した理由を説明します。
— bonafernando 2018
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.