2012-02-28 15 views
25

Tengo una pregunta que parece muy simple, pero simplemente no puedo hacerlo bien. Tengo un <select> con una lista de opciones y un valor predeterminado. Después de que el usuario selecciona una opción y hace clic en un botón, quiero que la selección vuelva a su valor predeterminado.Cómo cambiar un valor <select> de JavaScript

<select id="select"> 
<option value="defaultValue">Default</option> 
<option value="Option1">Option1</option> 
<option value="Option2">Option2</option>  
</select> 
<input type="button" value="CHANGE" onclick="selectFunction()" /> 

por lo que permite suponer que el usuario selecciona la opción 1. consigo ese valor con javascript pero después de eso, quiero que la selección para volver a mostrar "por defecto".

Encontré que hacer document.getElementById("select").value = "defaultValue" no funcionará.

¿Alguien sabe cómo cambiar ese valor al valor predeterminado?

+0

posible duplicado de [¿Cómo programáticamente establecer el valor de un elemento de caja de selección usando javascript?] (Http://stackoverflow.com/questions/ 78932/how-do-i-programtically-set-the-value-of-a-select-box-element-using-javascript) –

+0

Mira esto: http://javascriptstutorial.com/blog/selecting-dropdown-element -using-javascript-or-jquery –

Respuesta

36

Configuración .value al valor de una de las opciones funciona en todos los navegadores vagamente corrientes. En navegadores muy antiguos, que solía tener para establecer el selectedIndex:

document.getElementById("select").selectedIndex = 0; 

Si ni eso ni el código original está trabajando, me pregunto si usted podría estar usando IE y tener algo demás en la página de creación de algo llamado "seleccionar"? (¿O como name o como variable global?) Porque some versions of IE have a problem donde confunden espacios de nombres. Intente cambiar el id de la selección a "fluglehorn" y si eso funciona, usted sabe que ese es el problema.

7

Encontré que hacer document.getElementById("select").value = "defaultValue" no funcionará.

Debe estar experimentando un error por separado, ya que esto funciona bien en este live demo.

Y aquí está el código completo de trabajo en caso de estar interesado:

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
    <title>Demo</title> 
    <script type="text/javascript"> 
     var selectFunction = function() { 
      document.getElementById("select").value = "defaultValue"; 
     }; 
    </script> 
</head> 
<body> 
    <select id="select"> 
     <option value="defaultValue">Default</option> 
     <option value="Option1">Option1</option> 
     <option value="Option2">Option2</option>  
    </select> 
    <input type="button" value="CHANGE" onclick="selectFunction()" /> 
</body> 
</html> 
+0

¿Es posible seleccionar un valor que no esté en las opciones? – Fractaliste

+0

Podría funcionar en Chrome, Firefox pero no puedo obtener el valor seleccionado en el menú desplegable en algunas versiones de IE. Intenté probar en IE9 e IE 11 y terminé con el mismo problema. –

6

document.getElementById("select").selectedIndex = 0 trabajará

+0

Quiero que SELECT vuelva a mostrar el valor predeterminado. Lo hice, y la pantalla no muestra el valor predeterminado de nuevo – mauguerra

+0

Lo haré si la opción predeterminada está en el índice 0. Es en otro índice que use ese índice. Ver http://jsfiddle.net/gN3ke/2/ aquí he usado Option2 por defecto. Y establezca selectedIndex en 2 –

1

Usted puede utilizar la propiedad selectedIndex para establecerlo en la primera opción:

document.getElementById("select").selectedIndex = 0; 
3

Si desea que vaya de nuevo a la primera opción intente esto:

document.getElementById("select").selectedIndex = 0; 
4

Una vez que haya realizado su procesamiento en SelectFunction(), puede hacer lo siguiente

document.getElementById('select').selectedIndex = 0; 
document.getElementById('select').value = 'Default'; 
2
<script language="javascript" type="text/javascript"> 
     function selectFunction() { 
      var printStr = document.getElementById("select").options[0].value 
      alert(printStr); 
      document.getElementById("select").selectedIndex = 0; 
     } 
    </script> 
1

creo que sé cuál es el problema aquí - si usted está tratando de tener que seleccionar una opción que no existe, no va a funcionar. Primero debes AGREGAR la opción. Como tal:

var option=document.createElement("option"); 
option.text=document.getElementById('other_referee').value 
document.getElementById('referee_new').add(option,null); 
document.getElementById('referee_new').value = document.getElementById('other_referee').value; 

No es elegante, pero se entiende la idea.

4
$('#select').val('defaultValue'); 
$('#select').change(); 

Esto también dará lugar a eventos enganchados a este selecto

+0

O $ ('# select'). Trigger ('cambio'); – Sindis

Cuestiones relacionadas