web-dev-qa-db-ja.com

<select>を使用してselect2でカスタムデータ属性を取得します

次のHTML5があると仮定しましょう

<select id="example">
    <option value="AA" data-id="143">AA</option>
    <option value="BB" data-id="344">BB</option>
</select>

$("#example").select2();

選択したオプションからデータIDを取得するにはどうすればよいですか？

html5jquery-select2custom-data-attribute
17
Kalzem

Select2には直接的な方法はありません。select2データとjQueryの組み合わせを使用できます。

$("#example").select2().find(":selected").data("id");

最初にselect2データを取得してから、jQueryで選択したオプションを見つけ、最後にデータ属性を見つけます。

26
Kalzem

Select2 v4は、非表示の<select>タグではなく<input>タグに依存しているため、選択したオプションを簡単に取得できます。元の<select>を参照するだけです。これはSelect2 v3にも当てはまりますが、Select2 v4のみを使用しました。

$('#example option:selected').attr('data-id')

jsfiddleデモンストレーション

JavaScriptを使用してドロップダウンリストで選択した値を取得しますか？ も参照してください。

編集：私は この回答 汎用データオブジェクトアクセスのために：

var d = $("#dropdown").select2("data");

dは、選択されたアイテムをオブジェクトとして含む配列になるため、最初のアイテムのidプロパティにアクセスするには：

var id = d[0].id;
11
Paul
$(document).ready(function() {
    $('select#myselect').select2({
        templateResult: formatOutput
    });

});
function formatOutput (item) {
    var $state = $(item.element).data('id') + ' ' + item.text;
    return $state;
};
10
Wagner Langer

これを何時間も解決しようとした後、私は何とか属性を引き出しました。 3.5.4を使用しています

$("#select2").select2('data').element[0].attributes[1].nodeValue

HTML

<select id="select2" name="course" class="form-control">
  <option></option>  
  <optgroup label="Alabama">  
    <option value="City 1" data-url="/alabama/city-1">City 1</option>  
    <option value="City 2" data-url="/alabama/city-2">City 2</option>  
  </optgroup>  
</select>
$("#select2").select2('data').element[0].attributes[0].nodeValue --> Value Attribute
$("#select2").select2('data').element[0].attributes[1].nodeValue --> Data-URl Attribute
6
Loreto Gabawa Jr.

次のように単純にこれを行うことができます。

$(this).find(":selected").data("id")
2
Abhinav bhardwaj

Select2イベント（3.5）を使用して選択したオプションのデータ属性の値を取得する方法に関する私の貢献（thx to @ loreto g's answer ）：

<select id="myselect">
    <option value="foo" data-type="bar" data-options='baz'></option>
</select>

<script>
var myselect = $('#myselect').select2();

myselect.on('select2-selecting', function(sel){

    var seltype = sel.choice.element[0].attributes['data-type'].value,
        seloptions = sel.choice.element[0].attributes['data-options'].value;

});
</script>

お役に立てれば

2
MrSo

jquery apiを使用して非常に簡単[select2 4.xバージョンに対してテスト済み]

$('#select').on('select2:select', function (e) {
    let id = $(e.params.data.element).data('id');
});
2
hassan

Select2を使用してすべてのオプションを動的に（配列から）ロードしますが、これは私が正常に使用できることです。

$('#element').select2('data')[0].dataAttribute;

selectのidは 'element'で、dataAttributeは取得しようとしているオプションのカスタム属性です。

0
Brian Duncan