jQuery - ottenere l'attributo personalizzato dall'opzione selezionata

224

Dato quanto segue:

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

Questo non funziona ...
Cosa devo fare per ottenere il valore del campo nascosto aggiornato al valore di myTag quando la selezione viene modificata. Suppongo di dover fare qualcosa per ottenere il valore attualmente selezionato ...?

jquery

— Jason
fonte

518

Stai aggiungendo il gestore eventi <select>all'elemento.
Pertanto, $(this)sarà il menu a discesa stesso, non quello selezionato <option>.

Devi trovare il selezionato <option>, in questo modo:

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

— SLaks
fonte

7

Ha reso il mio crunch-time tutto notte molto più facile ... +1!

— eduncan911,

3

Nota, se stai cercando di recuperare l'opzione che è stata selezionata quando la pagina è stata caricata (non l'opzione attualmente selezionata) puoi invece usare $ ('opzione [selezionata]', questa) (nota: se nessuna opzione è stata selezionata quando pagina caricata, che non restituirà alcuna corrispondenza, quindi chiamare attr () su ciò si tradurrà in indefinito. Facile da testare e da gestire ovviamente.)

— Jon Kloske

50

Prova questo:

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

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

— tvanfosson
fonte

26

Questo perché l'elemento è "Seleziona" e non "Opzione" in cui hai il tag personalizzato.

Prova questo: $("#location option:selected").attr("myTag").

Spero che questo ti aiuti.

— NawaMan
fonte

Risposta breve e semplice. : thumbsup:

— Vicky Thakor

9

Prova questo:

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

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

Nella funzione di richiamata per change(), si thisriferisce alla selezione, non all'opzione selezionata.

— Davide Gualano
fonte

8

Supponiamo di avere molte scelte. Questo può farlo:

$('.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
fonte

7

Sei abbastanza vicino:

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

— Cerin
fonte

4

Sintassi più semplice se un modulo.

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

... se più di un modulo.

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

— openwonk
fonte

1

Ecco l'intero script con una chiamata AJAX per indirizzare un singolo elenco all'interno di una pagina con più elenchi. Nessuna delle altre cose sopra ha funzionato per me fino a quando non ho usato l'attributo "id" anche se il mio nome dell'attributo è "ItemKey". Usando il debugger

Debug di Chrome

Sono stato in grado di vedere che l'opzione selezionata aveva degli attributi: con una mappa per "id" di JQuery e il valore.

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

Ecco il file JSON per creare ...

{  
"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"
}
]
}

Spero che questo aiuti, grazie a tutti per avermi portato così lontano.

— Curtis Fisher
fonte

0

Prova questo esempio:

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

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

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

});

— Dharmendra Singh
fonte

0

$("body").on('change', '#location', function(e) {

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

});

— Amit-Rlogical
fonte

0

Puoi anche provare questo con 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
fonte

0

Il più semplice,

$('#location').find('option:selected').attr('myTag');

— Robin Hossain
fonte