javascript - example - jQuery Obtener la opción seleccionada de la lista desplegable

jquery innertext

Question

Normalmente, uso $("#id").val() para devolver el valor de la opción seleccionada, pero esta vez no funciona. La etiqueta seleccionada tiene el id aioConceptName

código HTML

<label>Name</label>
<input type="text" name="name" />
<select id="aioConceptName">
<option>choose io</option>
<option>roma</option>
<option>totti</option>
</select>

Answer 1

¿Has considerado usar javascript antiguo?

var box = document.getElementById(''aioConceptName'');
conceptName = box.options[box.selectedIndex].text;

Consulte también Obtención de una opción de texto / valor con JavaScript

Answer 2

Con jQuery, solo agregue un evento de change y obtenga el valor o el texto seleccionado dentro de ese controlador.

Si necesita un texto seleccionado, use este código:

$("#aioConceptName").change(function () {
alert($("#aioConceptName :selected").text())
});

O si necesita un valor seleccionado, use este código:

$("#aioConceptName").change(function () {
alert($("#aioConceptName :selected").attr(''value''))
});

Answer 3

Espero que esto también ayude a comprender mejor y ayude a probar esto a continuación, $(''select[id="aioConceptName[]"] option:selected'').each(function(key,value){ options2[$(this).val()] = $(this).text(); console.log(JSON.stringify(options2)); });
Para obtener más detalles, visite http://www.drtuts.com/get-value-multi-select-dropdown-without-value-attribute-using-jquery/

Answer 4

Me topé con esta pregunta y desarrollé una versión más concisa de la respuesta de Elliot BOnneville:

var conceptName = $(''#aioConceptName :selected'').text();

o genéricamente:

$(''#id :pseudoclass'')

Esto le ahorra una llamada jQuery adicional, selecciona todo en un disparo y es más claro (mi opinión).

Answer 5

Para las opciones de menú desplegable, probablemente quieras algo como esto:

var conceptName = $(''#aioConceptName'').find(":selected").text();

La razón por la que val() no funciona es porque hacer clic en una opción no cambia el valor del menú desplegable, simplemente agrega la propiedad :selected a la opción seleccionada, que es un elemento secundario del menú desplegable.

Answer 6

Para quien descubrió que la mejor respuesta no funciona.

Tratar de usar:

 $( "#aioConceptName option:selected" ).attr("value");

Trabaja para mí en proyectos recientes, así que vale la pena verlo.

Answer 7

Por lo general, no solo es necesario obtener el valor seleccionado, sino también ejecutar alguna acción. Entonces, ¿por qué no evitar toda la magia jQuery y simplemente pasar el valor seleccionado como un argumento a la llamada de acción?

<select onchange="your_action(this.value)">
<option value=''*''>All</option>
<option ... />
</select>

Answer 8

Probablemente, su mejor apuesta con este tipo de escenario es usar el método de cambio de jQuery para encontrar el valor seleccionado actualmente, de esta manera:

$(''#aioConceptName'').change(function(){
//get the selected val using jQuery''s ''this'' method and assign to a var
var selectedVal = $(this).val();
//perform the rest of your operations using aforementioned var
});

Prefiero este método porque luego puede realizar funciones para cada opción seleccionada en un campo de selección determinado.

¡Espero que ayude!

Answer 9

Prueba esto por valor ...

$("select#id_of_select_element option").filter(":selected").val();

o esto para el texto ...

$("select#id_of_select_element option").filter(":selected").text();

Answer 10

Puede seleccionar el uso exacto de la opción seleccionada: a continuación le daremos innerText

$("select#aioConceptName > option:selected").text()

Mientras que abajo te dará valor.

$("select#aioConceptName > option:selected").val()

Answer 11

Puede usar $("#drpList").val();

Answer 12

Puedes intentar depurarlo de esta manera:

console.log($(''#aioConceptName option:selected'').val())

Answer 13

Sólo esto debería funcionar:

var conceptName = $(''#aioConceptName'').val();

Answer 14

Si desea capturar el atributo ''valor'' en lugar del nodo de texto, esto funcionará para usted:

var conceptName = $(''#aioConceptName'').find(":selected").attr(''value'');

Answer 15

Si está en contexto de evento, en jQuery, puede recuperar el elemento de opción seleccionado usando:
$(this).find(''option:selected'') esta manera:

$(''dropdown_selector'').change(function() {
//Use $option (with the "$") to see that the variable is a jQuery object
var $option = $(this).find(''option:selected'');
//Added with the EDIT
var value = $option.val();//to get content of "value" attrib
var text = $option.text();//to get <option>Text</option> content
});

Editar

Como lo mencionó PossessWithin , Mi respuesta solo responde a la pregunta: Cómo seleccionar la opción seleccionada.

A continuación, para obtener el valor de la opción, use option.val() .

Answer 16

Use la función jQuery.val() para seleccionar elementos, también:

El método .val () se usa principalmente para obtener los valores de elementos de formulario como input, select y textarea. En el caso de elementos seleccionados, devuelve null cuando no se selecciona ninguna opción y una matriz que contiene el valor de cada opción seleccionada cuando hay al menos una y es posible seleccionar más porque el atributo multiple está presente.

$(function() {
$("#aioConceptName").on("change", function() {
$("#debug").text($("#aioConceptName").val());
}).trigger("change");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select id="aioConceptName">
<option>choose io</option>
<option>roma</option>
<option>totti</option>
</select>
<div id="debug"></div>

Answer 17

debe utilizar esta sintaxis:

var value = $(''#Id :selected'').val();

Así que prueba este Código:

var values = $(''#aioConceptName :selected'').val();

Puedes probar en Fiddle: http://jsfiddle.net/PJT6r/9/

Ver acerca de esta respuesta en este post.

Answer 18

intenta con este

$(document).ready(function() {
$("#name option").filter(function() {
return $(this).val() == $("#firstname").val();
}).attr(''selected'', true);
$("#name").live("change", function() {
$("#firstname").val($(this).find("option:selected").attr("value"));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<select id="name" name="name">
<option value="">Please select...</option>
<option value="Elvis">Elvis</option>
<option value="Frank">Frank</option>
<option value="Jim">Jim</option>
</select>
<input type="text" id="firstname" name="firstname" value="Elvis" readonly="readonly">

Answer 19

para obtener una selección con la misma clase = nombre, puede hacer esto, para verificar si una opción de selección está seleccionada.

var bOK = true;
$(''.optKategorien'').each(function(index,el){
if($(el).find(":selected").text() == "") {
bOK = false;
}
});

Answer 20

Establecer los valores para cada una de las opciones.

<select id="aioConceptName">
<option value="0">choose io</option>
<option value="1">roma</option>
<option value="2">totti</option>
</select>

$(''#aioConceptName'').val() no funcionó porque .val() devuelve el atributo de value . Para que funcione correctamente, los atributos de value deben establecer en cada <option> .

Ahora puede llamar a $(''#aioConceptName'').val() lugar de a todo esto :selected vudú :selected sido sugerido por otros.

Answer 21

Leyendo el valor (no el texto) de una selección:

var status = $("#Status").val();
var status = $("#Status")[0].value;
var status = $(''#Status option:selected'').val();

¿Cómo deshabilitar una selección? en ambas variantes, el valor se puede cambiar usando:

UNA

El usuario no puede interactuar con el desplegable. Y él no sabe qué otras opciones podrían existir.

$(''#Status'').prop(''disabled'', true);

segundo

El usuario puede ver las opciones en el menú desplegable, pero todas están deshabilitadas:

$(''#Status option'').attr(''disabled'', true);

En este caso, $("#Status").val() solo funcionará para versiones de jQuery más pequeñas que 1.9.0 . Todas las demás variantes funcionarán.

¿Cómo actualizar una selección deshabilitada?

Desde el código que está detrás todavía puede actualizar el valor en su selección. Está deshabilitado solo para usuarios:

$("#Status").val(2);

En algunos casos es posible que tenga que desencadenar eventos:

$("#Status").val(2).change();

Answer 22

$(''#aioConceptName option:selected'').val();

Answer 23

<select id="form-s" multiple="multiple">
<option selected>city1</option>
<option selected value="c2">city2</option>
<option value="c3">city3</option>
</select>
<select id="aioConceptName">
<option value="s1" selected >choose io</option>
<option value="s2">roma </option>
<option value="s3">totti</option>
</select>
<select id="test">
<option value="s4">paloma</option>
<option value="s5" selected >foo</option>
<option value="s6">bar</option>
</select>
<script>
$(''select'').change(function() {
var a=$('':selected'').text(); // "city1city2choose iofoo"
var b=$('':selected'').val(); // "city1" - selects just first query !
//but..
var c=$('':selected'').map(function(){ // ["city1","city2","choose io","foo"]
return $(this).text();
});
var d=$('':selected'').map(function(){ // ["city1","c2","s1","s5"]
return $(this).val();
});
console.log(a,b,c,d);
});
</script>