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

224

Compte tenu des é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 obtenir la valeur du champ caché mise à jour à la valeur de myTag lorsque la sélection est modifiée. Je suppose que je dois faire quelque chose pour obtenir la valeur actuellement sélectionnée ...?

jquery Jason
la source

Réponses:

518

Vous ajoutez le gestionnaire d'événements à l' <select>élément.
Par conséquent, ce $(this)sera la liste déroulante elle-même, pas celle sélectionnée <option>.

Vous devez trouver le sélectionné <option>, comme ceci:

var option = $('option:selected', this).attr('mytag');
SLaks
la source
7
J'ai rendu mon temps de crunch toute la nuit tellement plus facile ... +1!
eduncan911
3
Remarque, si vous cherchez à récupérer l'option qui a été sélectionnée lors du chargement de la page (et non l'option actuellement sélectionnée), vous pouvez utiliser $ ('option [sélectionné]', ceci) à la place (remarque: si aucune option n'a été sélectionnée lorsque le page chargée, qui ne renverra aucune correspondance, donc appeler attr () sur cela se traduira par indéfini. facile à tester et à gérer bien sûr.)
Jon Kloske
50

Essaye ça:

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

        $('#setMyTag').val(myTag); 
    }); 
});
tvanfosson
la source
26

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

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

J'espère que cela t'aides.

NawaMan
la source
Réponse courte et simple. : thumbsup:
Vicky Thakor
9

Essaye ça:

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

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

Dans la fonction de rappel pour change(), thisfait référence à la sélection, pas à l'option sélectionnée.

Davide Gualano
la source
8

Supposons que vous ayez plusieurs sélections. Cela 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.
});
paulo
la source
7

Vous êtes assez proche:

var myTag = $(':selected', element).attr("myTag");
Cerin
la source
4

Syntaxe plus simple si une seule forme.

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

... si plusieurs formulaires.

var option = $('select#myform option:selected').attr('mytag')

openwonk
la source
1

Voici le script complet avec un appel AJAX pour cibler une seule liste dans une page avec plusieurs listes. Aucune des autres choses ci-dessus n'a fonctionné pour moi jusqu'à ce que j'utilise l'attribut "id" même si mon nom d'attribut est "ItemKey". En utilisant le débogueur

Débogage Chrome

J'ai pu voir que l'option sélectionnée avait des attributs: avec une carte vers le "id" JQuery et la valeur.

<html>
<head>
<script type="text/JavaScript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
</head>
<body>
<select id="List1"></select>
<select id="List2">
<option id="40000">List item #1</option>
<option id="27888">List item #2</option>
</select>

<div></div>
</body>
<script type="text/JavaScript">
//get a reference to the select element
$select = $('#List1');

//request the JSON data and parse into the select element
$.ajax({
url: 'list.json',
dataType:'JSON',
success:function(data){

//clear the current content of the select
$select.html('');

//iterate over the data and append a select option
$.each(data.List, function(key, val){
$select.append('<option id="' + val.ItemKey + '">' + val.ItemText + '</option>');
})
},

error:function(){

//if there is an error append a 'none available' option
$select.html('<option id="-1">none available</option>');
}
});

$( "#List1" ).change(function () {
var optionSelected = $('#List1 option:selected').attr('id');
$( "div" ).text( optionSelected );
});
</script>
</html>

Voici le fichier JSON à créer ...

{  
"List":[  
{  
"Sort":1,
"parentID":0,
"ItemKey":100,
"ItemText":"ListItem-#1"
},
{  
"Sort":2,
"parentID":0,
"ItemKey":200,
"ItemText":"ListItem-#2"
},
{  
"Sort":3,
"parentID":0,
"ItemKey":300,
"ItemText":"ListItem-#3"
},
{  
"Sort":4,
"parentID":0,
"ItemKey":400,
"ItemText":"ListItem-#4"
}
]
}

J'espère que cela vous aide, merci à tous de m'avoir amené jusqu'ici.

Curtis Fisher
la source
0

Essayez cet exemple:

$("#location").change(function(){

    var tag = $("option[value="+$(this).val()+"]", this).attr('mytag');

    $('#setMyTag').val(tag); 

});
Dharmendra Singh
la source
0 
$("body").on('change', '#location', function(e) {

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

});
Amit-Rlogical
la source
0

Vous pouvez également essayer celui-ci avec data-myTag

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

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

<script>
    $(function() {
        $("#location").change(function(){
           var myTag = $('option:selected', this).data("myTag");

           $('#setMyTag').val(myTag);
        });
    });
</script>
Akhtar Munir
la source
0

Le plus simple,

$('#location').find('option:selected').attr('myTag');
Robin Hossain
la source