web-dev-qa-db-fra.com

Obtenir un attribut de données personnalisé dans select2 avec <select>

Supposons que vous ayez le HTML5 suivant

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

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

Comment puis-je obtenir l'id de données de l'option sélectionnée?

html5jquery-select2custom-data-attribute
14
Kalzem

Il n'y a pas de méthode directe avec select2, vous pouvez utiliser une combinaison de select2 data et jQuery:

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

Vous obtenez d’abord les données select2, puis vous trouvez l’option sélectionnée avec jQuery et enfin l’attribut data.

20
Kalzem

Select2 v4 s'appuie sur les balises <select> au lieu des balises <input> cachées; il est donc plus facile d'obtenir l'option ou les options sélectionnées: vous vous référez simplement au <select> d'origine. Cela a peut-être également été le cas avec Select2 v3 mais je n’ai utilisé que Select2 v4.

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

jsfiddle démonstration

Voir aussi Obtenir la valeur sélectionnée dans la liste déroulante en utilisant JavaScript?

Edit: J'aime cette réponse pour un accès général aux objets de données:

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

d sera un tableau contenant le ou les éléments sélectionnés en tant qu'objets. Pour accéder à la propriété id du premier élément, procédez comme suit:

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

Après des heures à essayer de résoudre ce problème, j’ai réussi à retirer cet attribut. J'utilise 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.

nous pouvons simplement faire ceci comme: 

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

Ma contribution sur l'obtention de la valeur de l'attribut data de l'option sélectionnée à l'aide de l'événement Select2 (3.5) (merci à @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>

J'espère que cela t'aides

2
MrSo

si simple, en utilisant jquery api [testé contre la version de select2 4.x]

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

J'utilise select2 pour charger toutes mes options de manière dynamique (à partir d'un tableau), et voici ce que j'ai pu utiliser avec succès:

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

où id de l'élément select est 'element' et dataAttribute est l'attribut personnalisé de l'option que je tente de récupérer.

0
Brian Duncan