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

166

Compte tenu de ce qui suit:jQuery - obtenir attribut personnalisé de l'option sélectionnée

<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>

qui ne fonctionne pas ...
Que dois-je faire pour obtenir la valeur du champ caché mis à 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 ...?

Source

2010-02-09 Jason

Est-ce que quelqu'un vous a dit "YOU ROCK !!!" .. Eh bien, je pense que je suis le premier! – curiousBoy

387

Vous ajoutez le gestionnaire d'événements à l'élément <select>.
Par conséquent, $(this) sera le menu déroulant lui-même, pas le <option> sélectionné.

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

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

Source

2010-02-09 16:37:36 SLaks

J'ai tellement simplifié ma période crunch toute la nuit ... +1! – eduncan911

Great :) Merci SLaks 50 est par le mien :) – kbvishnu

Merci, utile pour moi – user1493023

Essayez ceci:

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

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

Source

2010-02-09 16:37:54 tvanfosson

Ce que l'élément est le "Select" et non "Option" dans lequel vous avez l'étiquette personnalisée.

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

Espérons que cela aide.

Source

2010-02-09 16:38:43 NawaMan

Essayez ceci:

$("#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.

Source

2010-02-09 16:41:30

Vous êtes assez proche:

var myTag = $(':selected', element).attr("myTag");

Source

2010-02-09 16:42:22 Cerin

Supposons que vous avez beaucoup de 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. 
});

Source

2011-11-13 01:56:47 paulo

Syntaxe plus simple si une forme.

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

... si plus d'une forme.

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

Source

2016-08-30 16:30:35 openwonk

Voici le script entier avec un appel AJAX pour cibler une liste unique dans une page avec plusieurs listes. Aucun des autres éléments 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

Chrome Debug

j'ai pu voir que l'option choisie avait des attributs: une carte à l'JQuery « id » 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 pour 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" 
} 
] 
}

Hope this helps, merci à vous tous ci-dessus pour me faire jusque-là.

Source

2017-07-27 20:24:38

appliquer cet exemple:

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

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

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

});

Source

2017-10-06 05:38:44

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

Répondre

Questions connexes