2010-03-04 19 views
91

Estoy tratando de obtener la opción seleccionada de un menú desplegable y completar otro elemento con ese texto, de la siguiente manera. IE está despertando una tormenta y no funciona en Firefox:Obtener la opción seleccionada del elemento de selección

$('#ddlCodes').change(function() { 
    $('#txtEntry2').text('#ddlCodes option:selected').text(); 
}); 

¿Qué estoy haciendo mal?

+1

También recomendaría Firebug para Firefox si aún no lo tiene. –

+0

Tentado a rechazar un "no funciona" sin especificar de qué manera falla. – LarsH

Respuesta

183

Aquí hay una versión corta:

$('#ddlCodes').change(function() { 
    $('#txtEntry2').text($(this).find(":selected").text()); 
}); 

karim79 hizo un buen partido, a juzgar por el nombre del elemento txtEntry2 puede ser un cuadro de texto, si se trata de cualquier tipo de entrada, necesitarás usar .val() en su lugar o .text() de esta manera:

$('#txtEntry2').val($(this).find(":selected").text()); 

Para "¿qué pasa?" parte de la pregunta: .text() no toma un selector, toma el texto que desea establecer, o nada para devolver el texto que ya está allí. Por lo tanto, debe buscar el texto que desea y luego colocarlo en el método .text(string) en el objeto que desea establecer, como he indicado anteriormente.

+7

Si 'txtEntry2' es una entrada de texto, OP necesitará usar' val() 'en su lugar. – karim79

+0

@ karim79 - Buen punto, por el nombre del elemento que probablemente sea, la actualización. –

+0

sí, al cambiar .text a .val y al buscar el texto de manera diferente, todo se solucionó. Gracias amigos – Matt

15

Prueba esto:

$('#ddlCodes').change(function() { 
    var option = this.options[this.selectedIndex]; 
    $('#txtEntry2').text($(option).text()); 
}); 
8

Aquí es una versión más corta que también deben trabajar:

$('#ddlCodes').change(function() { 
     $('#txtEntry2').text(this.val()); 
    }); 
+0

UnEdge TypeError: Object # no tiene el método 'val' – DoodleKana

+0

'this.value' lo arreglaría. –

4

Con menos jQuery:

<select name="ddlCodes" 
onchange="$('#txtEntry2').text(this.options[this.selectedIndex].value);"> 

this.options[this.selectedIndex].value es normal JavaScript.

(Fuente: German SelfHTML)

1

Esto funcionó para mí:

$("#SelectedCountryId_option_selected")[0].textContent 
2

Try siguiente código

$('#ddlCodes').change(function() { 
    $('#txtEntry2').val( $('#ddlCodes :selected').text()); 
}); 
2

Para saber el número de elementos seleccionados del uso de

$("select option:selected").length 

para obtener el valor de todos los elementos seleccionados del uso de

var str = ""; 
    $("select option:selected").each(function() { 
     str += $(this).text() + " "; 
     }); 
1

La primera parte es conseguir que el elemento del menú desplegable que puede tener este aspecto:

<select id="cycles_list"> 
    <option value="10">10</option> 
    <option value="100">100</option> 
    <option value="1000">1000</option> 
    <option value="10000">10000</option> 
</select> 

Para capturar a través de jQuery que puede hacer algo así:

$('#cycles_list').change(function() { 
    var mylist = document.getElementById("cycles_list"); 
    iterations = mylist.options[mylist.selectedIndex].text; 
}); 

vez que haya almacenado el valor de la variable, el siguiente paso sería enviar la información almacenada en la variable al campo de formulario o elemento HTML de su elección. Puede ser un elemento div p o personalizado.

i.e. <p></p> OR <div></div>

Se podría utilizar:

$('p').html(iterations); OR $('div').html(iterations);

Si desea rellenar un campo de texto, tales como:

<input type="text" name="textform" id="textform"></input>

se debería utilizar:

$('#textform').text = iterations;

Por supuesto puede hacer todo lo anterior en menos pasos, simplemente no entiendo ayuda a las personas a aprender cuando se divide todo en pasos fáciles de entender ... ¡Espero que esto ayude!

1

Utilizando la propiedad selectedOptions (HTML5) se puede obtener la opción seleccionada (s)

document.getElementbyId("id").selectedOptions; 

con jQuery se puede lograr al hacer esto

$("#id")[0].selectedOptions; 

o

$("#id").prop("selectedOptions"); 

La propiedad contiene una matriz HTMLCollection similitar a esta una seleccionada opción

[<option value=​"1">​ABC</option>] 

o varias selecciones

[<option value=​"1">​ABC</option>, <option value=​"2">​DEF</option> ...] 
0

Lo anterior muy bien funcionarían, pero parece que ha perdido el encasillado de jQuery para el texto desplegable. Aparte de eso, sería aconsejable usar .val() para establecer texto para un elemento de tipo de texto de entrada. Con estos cambios, el código podría tener el siguiente aspecto:

$('#txtEntry2').val($('#ddlCodes option:selected').text()); 
0

si tiene esto ya y el uso de jQuery esto va a ser su respuesta:

$ ($ (this) [0] .selectedOptions [0]) .text()

0

Teniendo en cuenta este código HTML:

<select> 
    <option value="0">One</option> 
    <option value="1">Two</option> 
</select> 

Selección por descripción de jQuery v1.6 +:

var text1 = 'Two'; 
$("select option").filter(function() { 
    //may want to use $.trim in here 
    return $(this).text() == text1; 
}).prop('selected', true); 
Cuestiones relacionadas