web-dev-qa-db-ja.com

<input>を使用してselect2から選択したテキストを取得する方法

私はselect2コントロール、 データの読み込み ajaxを使用しています。これには、<input type=hidden..>タグの使用が必要です。

次に、選択したテキストを取得します。 （data-bind式のvalueプロパティはidのみを格納します）

$(".select2-chosen").text()を試しましたが、ページに複数のselect2コントロールがある場合、これは壊れます。

javascriptjqueryknockout-2.0jquery-select2ui-select2
62
robasta

Select2 4.xの時点では、非複数選択リストであっても常に配列を返します。

var data = $('your-original-element').select2('data')
alert(data[0].text);
alert(data[0].id);

Select2 3.x以前の場合

シングル選択：

var data = $('your-original-element').select2('data');
if(data) {
  alert(data.text);
}

選択がない場合、変数 'data'はnullになることに注意してください。

複数選択：

var data = $('your-original-element').select2('data')
alert(data[0].text);
alert(data[0].id);
alert(data[1].text);
alert(data[1].id);

3.xから docs ：

data選択範囲を取得または設定します。 valメソッドに似ていますが、idの代わりにオブジェクトを使用します。

値が設定されていない単一選択で呼び出されたデータメソッドはnullを返し、空の複数選択で呼び出されたデータメソッドは[]を返します。

149
Moeri

私は最終的にこれを行うことがわかりました：

var $your-original-element = $('.your-original-element');
var data = $your-original-element.select2('data')[0]['text'];
alert(data);

値も必要な場合：

var value = $your-original-element.select2('data')[0]['id'];
alert(value);
14
Sol

また、次のコードを使用して、選択した値を持つことができます。

alert("Selected option value is: "+$('#SelectelementId').select2("val"));
2
Lokesh Das

以下のコードも解決します

.on("change", function(e) {

  var lastValue = e.currentTarget.value;
  var lastText = e.currentTarget.textContent;

 });
1
César Augusto

V4の時点でこれを行う正しい方法は次のとおりです。

$('.select2-chosen').select2('data')[0].text

文書化されていないため、将来警告なしに破損する可能性があります。

ただし、最初に選択項目があるかどうかを確認することをお勧めします。

var s = $('.select2-chosen');

if(s.select2('data') && !!s.select2('data')[0]){
    //do work
}
1
rynop

繰り返しますが、シンプルで簡単です

ユーザーが検索して選択するときにajaxで完璧に機能し、選択した情報をajax経由で保存します

 $("#vendor-brands").select2({
   ajax: {
   url:site_url('general/get_brand_ajax_json'),
  dataType: 'json',
  delay: 250,
  data: function (params) {
  return {
    q: params.term, // search term
    page: params.page
  };
},
processResults: function (data, params) {
  // 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, except to indicate that infinite
  // scrolling can be used
  params.page = params.page || 1;

  return {
    results: data,
    pagination: {
      more: (params.page * 30) < data.total_count
    }
  };
},
cache: true
},
escapeMarkup: function (markup) { return markup; }, // let our custom    formatter work
minimumInputLength: 1,
}).on("change", function(e) {


  var lastValue = $("#vendor-brands option:last-child").val();
  var lastText = $("#vendor-brands option:last-child").text();

  alert(lastValue+' '+lastText);
 });
0
Vaimeo

テキストを表示するためにこれを使用しました

var data = $('#id-selected-input').select2('data'); 
data.forEach(function (item) { 
    alert(item.text); 
})
0
RahmanRezaee

これはV 4.0.3を使用して正常に動作しています

var vv = $('.mySelect2');     
var label = $(vv).children("option[value='"+$(vv).select2("val")+"']").first().html();
console.log(label);
0
Qullbrune