cómo obtener el índice seleccionado de un menú desplegable

Question

Tengo un menú desplegable normal que quiero obtener el índice seleccionado actualmente y ponerlo en una variable. Jquery o javascript. Jquery se molestó.

<select name="CCards"> 
<option value="0">Select Saved Payment Method:</option> 
<option value="1846">test xxxx1234</option> 
<option value="1962">test2 xxxx3456</option> 
</select> 

Answer 1

$("select[name='CCards'] option:selected") debe hacer el truco

documentación

Ver jQuery para más detalles: http://api.jquery.com/selected-selector/

ACTUALIZACIÓN: si necesita el índice de la opción seleccionada, es necesario utilizar el jQuery .index() método:

$("select[name='CCards'] option:selected").index() 

Answer 2

<select name="CCards" id="ccards"> 
    <option value="0">Select Saved Payment Method:</option> 
    <option value="1846">test xxxx1234</option> 
    <option value="1962">test2 xxxx3456</option> 
</select> 

<script type="text/javascript"> 

    /** Jquery **/ 
    var selectedValue = $('#ccards').val(); 

    //** Regular Javascript **/ 
    var selectedValue2 = document.getElementById('ccards').value; 


</script> 

Answer 3

Esto hará que el índice de la opción seleccionada en el cambio:

$('select').change(function(){ 
 
    console.log($('option:selected',this).index()); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select name="CCards"> 
 
<option value="0">Select Saved Payment Method:</option> 
 
<option value="1846">test xxxx1234</option> 
 
<option value="1962">test2 xxxx3456</option> 
 
</select>

Answer 4

el índice real está disponible como una propiedad del elemento select.

var sel = document.getElementById('CCards'); 
alert(sel.selectedIndex); 

puede usar el índice para ir a la opción de selección, donde puede extraer el texto y el valor.

var opt = sel.options[sel.selectedIndex]; 
alert(opt.text); 
alert(opt.value); 

Answer 5

Si en realidad se está buscando el número de índice (y no el valor) de la opción seleccionada, entonces sería

document.forms[0].elements["CCards"].selectedIndex 
/* You may need to change document.forms[0] to reference the correct form */ 

o el uso de jQuery

$('select[name="CCards"]')[0].selectedIndex 

Answer 6

También puede use :checked para <select> elementos

por ejemplo,

document.querySelector('select option:checked') 
document.querySelector('select option:checked').getAttribute('value') 

Ni siquiera tiene que obtener el índice y luego hacer referencia al elemento por su índice de hermanos.