2012-01-31 4 views
9

Aquí está mi cuadro de selección:extraer un "defecto" <option> en una caja de selección

<select id="category"> 
    <option value="">Pick a choice!</option> 
    <option value="">choice1</option> 
    <option value="">choice2</option> 
    <option value="">choice3</option> 
    <option value="">choice4</option> 
</select> 

Quiero la opción Pick a choice! a ser removido cuando el usuario haga clic en el cuadro de selección. Si el usuario hace clic en cualquier otro lugar, la opción Pick a choice! regresa. No quiero que el usuario pueda elegir la opción Pick a choice!. ¿Que debería hacer?

+1

Tendrá que utilizar JavaScript. Es posible que desee considerar el uso de una biblioteca JS, como [etiqueta: jquery], [etiqueta: mootools], [etiqueta: scriptaculous] ... –

+0

Necesita escribir algo de Javascript para lograrlo. –

+0

Duplicado de http://stackoverflow.com/questions/5805059/select-placeholder ?? – craig1231

Respuesta

4

Sin PHP o JavaScript para eliminar la opción de forma dinámica, tiene otra opción muy simple que yo uso regularmente, esta es la opción disabled="disabled". La opción permanecerá pero el usuario no podrá seleccionarla.

El error con esto es si alguien simplemente envía un formulario sin elegir nada que el valor vacío presentará en el formulario, pero aquí es donde entra en juego su manejo de validación.

Tu código para "Elige una opción!" opción se verá algo como esto:

<option disabled="disabled">Pick a choice!</option>

espero que ayude.

+0

encontré esta respuesta antes, pero no es suficiente. "elige una opción" necesito que se elimine por completo Estoy intentando algo en JQuery para ponerlo en pantalla: ninguno; publicando respuesta pronto Gracias por tu ayuda! –

+0

Agradezco los comentarios de Charles, solo un consejo para el futuro, si está buscando opciones, es mejor que enumere los idiomas con los que está trabajando, preferiblemente incluyéndolos en las etiquetas, pero incluso si está escrito en la pregunta, está bien. La razón es que tengo una serie de soluciones con PHP que puedo escribir sin pensar, hay otras como esa con JS y jQuery. Observe cómo nadie le ha dado una respuesta usando jQuery, solo un comentario con la sugerencia de probarlo, es en gran medida porque no lo etiquetó como aceptable en su respuesta, además de que no hay intentos previos mostrados con jQuery. Buena suerte – Ryan

-1

$ ("# Opción SelectID: first"). Remove();

0

Aquí hay algunas soluciones. No sé si esto es su requisito. Sólo

<html> 
<head> 
<title>Untitled Document</title> 
<script> 
function doremove() 
{ 

    var obj=document.getElementById("category"); 
    obj.remove(0); 
} 

function addOpt() 
{ 
var obj=document.getElementById("category"); 
var option=document.createElement("option"); 
option.text="Pick a choice!"; 
option.value = 0; 
obj.add(option,1); 
obj.value = 0; 
} 
</script> 
</head> 

<body> 
<select id="category" onfocus="doremove();" onblur="addOpt();"> 
    <option value="0">Pick a choice!</option> 
    <option value="">choice1</option> 
    <option value="">choice2</option> 
    <option value="">choice3</option> 
    <option value="">choice4</option> 
</select> 
<input type="text" /> 
</body> 
</html> 
4

CSS Sol'n


lo tanto, sé que este post es bastante antiguo, pero un css única solución no se le ofreció ... Mucho más eficiente manera de lograr esto. Observe que el primer <option> no tiene un atributo de valor; esto le permite colocar de manera efectiva.

#category:focus option:first-of-type { 
 
    display: none; 
 
}
<select id="category"> 
 
    <option>Pick a choice!</option> 
 
    <option value="choice1">choice1</option> 
 
    <option value="choice2">choice2</option> 
 
    <option value="choice3">choice3</option> 
 
    <option value="choice3">choice4</option> 
 
</select>

+0

Gracias. No pensé responder así. –

+1

De nada, creo. – Todd

Cuestiones relacionadas