jQuery - conseguir atributo personalizado de la opción seleccionada

166

Teniendo en cuenta lo siguiente:jQuery - conseguir atributo personalizado de la opción seleccionada

<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é tengo que hacer para obtener el valor del campo oculto actualizada al valor de myTag cuando se cambia la selección. ¿Asumo que tengo que hacer algo para obtener el valor seleccionado actualmente ...?

Fuente

2010-02-09 Jason

lo digas a nadie "YOU ROCK !!!" ¡Bueno, creo que soy el primero! – curiousBoy

387

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

es necesario encontrar el <option> seleccionado, así:

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

Fuente

2010-02-09 16:37:36 SLaks

Hizo mucho más fácil mi crisis durante todo el día ... ¡+1! – eduncan911

Genial :) Gracias SLaks 50 es por el mío :) – kbvishnu

Gracias, útil para mí – user1493023

Prueba esto:

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

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

Fuente

2010-02-09 16:37:54 tvanfosson

Eso porque el elemento es el "Select" y no "Opción" en el que tienes la etiqueta personalizada

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

Espero que esto ayude.

Fuente

2010-02-09 16:38:43 NawaMan

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(), this se refiere a la selección, no a la opción seleccionada.

Fuente

2010-02-09 16:41:30

Eres bastante estrecha:

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

Fuente

2010-02-09 16:42:22 Cerin

Suponga 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. 
});

Fuente

2011-11-13 01:56:47 paulo

Sintaxis más simple si se forma.

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

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

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

Fuente

2016-08-30 16:30:35 openwonk

Aquí es todo el guión con una llamada AJAX para apuntar a una lista única dentro de una página con varias listas. Ninguna de las otras cosas anteriores funcionó para mí hasta que utilicé el atributo "id" aunque mi nombre de atributo es "ItemKey". Al utilizar el depurador

Chrome Debug

pude ver que la opción seleccionada tenía atributos: con un mapa para el "id" 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 encima de por conseguirme este momento.

Fuente

2017-07-27 20:24:38

probar este ejemplo:

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

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

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

});

Fuente

2017-10-06 05:38:44

jQuery - conseguir atributo personalizado de la opción seleccionada

Respuesta

Cuestiones relacionadas