jQuery - obteniendo un atributo personalizado de la opción seleccionada

224

Dado lo siguiente:

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

Eso no funciona ...
¿Qué debo hacer para actualizar el valor del campo oculto al valor de myTag cuando se cambia la selección? ¿Asumo que necesito hacer algo para obtener el valor seleccionado actualmente ...?

jquery

— Jason
fuente

518

Estás agregando el controlador de eventos al <select>elemento.
Por lo tanto, $(this)será el menú desplegable en sí, no el seleccionado <option>.

Necesita encontrar el seleccionado <option>, así:

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

— SLaks
fuente

77

Hice mi tiempo de crisis durante toda la noche mucho más fácil ... ¡+1!

— eduncan911

3

Tenga en cuenta que si está buscando recuperar la opción que se seleccionó cuando se cargó la página (no la opción seleccionada actualmente), puede usar $ ('opción [seleccionada]', esto) en su lugar (nota: si no se seleccionó ninguna opción cuando el página cargada, que no devolverá coincidencias, por lo que llamar a attr () en eso dará como resultado indefinido, fácil de probar y tratar, por supuesto.)

— Jon Kloske

50

Prueba esto:

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

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

— tvanfosson
fuente

26

Esto se debe a que el elemento es "Seleccionar" y no "Opción" en el que tiene la etiqueta personalizada.

Prueba esto: $("#location option:selected").attr("myTag").

Espero que esto ayude.

— NawaMan
fuente

Respuesta corta y simple. : thumbsup:

— Vicky Thakor

9

Prueba esto:

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

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

En la función de devolución de llamada para change(), se thisrefiere a la selección, no a la opción seleccionada.

— Davide Gualano
fuente

8

Supongamos que tiene muchas selecciones. Esto puede hacerlo:

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

7

Estás bastante cerca:

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

— Cerin
fuente

4

Sintaxis más simple si una forma.

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

... si hay más de una forma.

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

— openwonk
fuente

1

Aquí está el script completo con una llamada AJAX para apuntar a una sola lista dentro de una página con múltiples listas. Ninguna de las otras cosas anteriores funcionó para mí hasta que usé el atributo "id" a pesar de que mi nombre de atributo es "ItemKey". Al usar el depurador

Depuración de Chrome

Pude ver que la opción seleccionada tenía atributos: con un mapa para el "id" de JQuery y el valor.

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

Aquí está el archivo JSON para crear ...

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

Espero que esto ayude, gracias a todos por ayudarme a llegar tan lejos.

— Curtis Fisher
fuente

0

Prueba este ejemplo:

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

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

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

});

— Dharmendra Singh
fuente

0

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

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

});

— Amit-Rlogical
fuente

0

También puedes probar este también 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
fuente

0

La más fácil

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

— Robin Hossain
fuente