webentwicklung-frage-antwort-db.com.de

Benutzerdefiniertes Datenattribut in select2 mit <select> abrufen

Nehmen wir an, Sie haben das folgende HTML5

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

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

Wie erhalte ich die Daten-ID von der ausgewählten Option?

14
Kalzem

Mit select2 gibt es keine direkte Methode. Sie können eine Kombination aus select2-Daten und jQuery verwenden:

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

Zuerst erhalten Sie die select2-Daten, dann finden Sie Ihre ausgewählte Option mit jQuery und schließlich das Datenattribut.

20
Kalzem

Select2 v4 stützt sich auf <select>-Tags anstelle von versteckten <input>-Tags. Daher ist es jetzt einfacher, die ausgewählte Option oder die ausgewählten Optionen zu erhalten: Sie beziehen sich nur auf den ursprünglichen <select>. Dies ist möglicherweise auch bei Select2 v3 der Fall, aber ich habe nur Select2 v4 verwendet.

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

jsfiddle demonstration

Siehe auch Ausgewählten Wert mithilfe von JavaScript in der Dropdown-Liste abrufen?

Edit: Ich mag diese Antwort für den allgemeinen Zugriff auf Datenobjekte:

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

d ist ein Array, das die ausgewählten Elemente als Objekte enthält, um auf die id-Eigenschaft des ersten Elements zuzugreifen:

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

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

Nach stundenlangen Versuchen, dieses Problem zu lösen, habe ich es geschafft, das Attribut herauszuziehen. Ich benutze 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

wir können das einfach so machen: 

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

Mein Beitrag, wie der Wert des Datenattributs der ausgewählten Option mithilfe des Select2-Ereignisses (3.5) abgerufen werden kann (Danke an @loreto gs 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>

Hoffe das hilft

2
MrSo

so einfach, mit Jquery-API [getestet gegen select2 4.x Version]

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

Ich verwende select2, um alle Optionen dynamisch (von einem Array) zu laden. Dies ist es, was ich erfolgreich verwenden konnte:

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

dabei ist die ID des select 'Elements' und dataAttribute ist das benutzerdefinierte Attribut für die Option, die ich abrufen möchte.

0
Brian Duncan