jQuery - obtention d'un attribut personnalisé à partir de l'option sélectionnée

Question

Étant donné les éléments suivants :

<select id="location">
    <option value="a" myTag="123">My option</option>
    <option value="b" myTag="456">My other option</option>
</select>

<input type="hidden" id="setMyTag" />

<script>
    $(function() {
        $("#location").change(function(){
            var element = $(this);
            var myTag = element.attr("myTag");

            $('#setMyTag').val(myTag);
        });
    });
</script>

Cela ne fonctionne pas...
Que dois-je faire pour que la valeur du champ caché soit mise à jour avec la valeur de myTag lorsque la sélection est modifiée. Je suppose que je dois faire quelque chose pour récupérer la valeur actuellement sélectionnée... ?

Answer 1

Vous ajoutez le gestionnaire d'événement à la section <select> élément.
Par conséquent, $(this) sera la liste déroulante elle-même, et non la sélection. <option> .

Vous devez trouver la sélection <option> comme ceci :

var option = $('option:selected', this).attr('mytag');

Answer 2

Essayez ça :

$(function() { 
    $("#location").change(function(){ 
        var element = $(this).find('option:selected'); 
        var myTag = element.attr("myTag"); 

        $('#setMyTag').val(myTag); 
    }); 
});

Answer 3

C'est parce que l'élément est le "Select" et non l'"Option" dans lequel vous avez la balise personnalisée.

Essayez ça : $("#location option:selected").attr("myTag") .

J'espère que cela vous aidera.

Answer 4

Essayez ça :

$("#location").change(function(){
            var element = $("option:selected", this);
            var myTag = element.attr("myTag");

            $('#setMyTag').val(myTag);
        });

Dans la fonction de rappel pour change() , this fait référence à la sélection, et non à l'option sélectionnée.

Answer 5

Supposons que vous ayez plusieurs sélections. Ceci peut le faire :

$('.selectClass').change(function(){
    var optionSelected = $(this).find('option:selected').attr('optionAtribute');
    alert(optionSelected);//this will show the value of the atribute of that option.
});