2011-09-14 16 views
6

Me pregunto, ¿es posible mostrar "Seleccionar uno" de forma predeterminada como opción seleccionada pero ocultarlo de la lista de opciones cuando el usuario hace clic para abrir el menú de selección? Quiero decir, algo así como placeholder para el campo de entrada de texto. ¿Hay alguna forma de hacerlo con js o algo más? Gracias de antemanoSeleccionar la opción "falsa" del menú

ACTUALIZACIÓN

digamos que tenemos menú de selección de

<select> 
<option value"">Select one...</option> 
<option value"1">Option 1 </option> 
... 
</select> 

lo que voy a hacer es, eliminar <option value"">Select one...</option> de la lista de opciones de menú cuando el usuario abre, y volver a los valores predeterminados indicar cuando el usuario cierra el menú.

+0

puede dar un mejor ejemplo - su pregunta no está recibiendo buenas respuestas * porque no es lo suficientemente clara * –

+0

Quiero decir, elimine esta opción cuando el usuario haga clic para abrir el menú de selección y regresar al estado predeterminado cuando el usuario cierre el menú . ¿Está limpio? –

+0

no, no está claro, debe hacer clic en "editar" para mejorar y aclarar su pregunta con un ejemplo. –

Respuesta

4

Tal como esto:

<SELECT NAME="browser" VALUE="" 
    onchange="var opt=this.options[0];if(opt.getAttribute('role')==='placeholder'&&!opt.selected)opt.parentNode.removeChild(opt);"> 
    <option role="placeholder" value="">Which Web browser do you use most often?</option> 
    <OPTGROUP LABEL="Firefox"> 
     <OPTION LABEL="2.0 or higher"> 
     Firefox 2.0 or higher 
     </OPTION> 
     <OPTION LABEL="1.5.x">Firefox 1.5.x</OPTION> 
     <OPTION LABEL="1.0.x">Firefox 1.0.x</OPTION> 
    </OPTGROUP> 
    <OPTGROUP LABEL="Microsoft Internet Explorer"> 
     <OPTION LABEL="7.0 or higher"> 
     Microsoft Internet Explorer 7.0 or higher 
     </OPTION> 
     <OPTION LABEL="6.x">Microsoft Internet Explorer 6.x</OPTION> 
     <OPTION LABEL="5.x">Microsoft Internet Explorer 5.x</OPTION> 
     <OPTION LABEL="4.x">Microsoft Internet Explorer 4.x</OPTION> 
    </OPTGROUP> 
    <OPTGROUP LABEL="Opera"> 
     <OPTION LABEL="9.0 or higher">Opera 9.0 or higher</OPTION> 
     <OPTION LABEL="8.x">Opera 8.x</OPTION> 
     <OPTION LABEL="7.x">Opera 7.x</OPTION> 
    </OPTGROUP> 
    <OPTION>Safari</OPTION> 
    <OPTION>Other</OPTION> 
    </SELECT> 

OPTION con la costumbre etiqueta role="placeholder" necesidad coloca primero en el interior SELECT para que funcione correctamente.

+0

pregunta actualizada. Por favor revisa –

+0

yepp. algo como eso. Pero, ¿podemos volver a cerrar esta opción y cómo devolver el menú al estado predeterminado después de la actualización de la página? –

+0

¿podemos hacerlo con '.append()', '.remove()'? –

2

¿Algo como esto?

<form> 
<select onchange="document.getElementById('placeholder').disabled=true"> 
    <option selected="selected" id="placeholder">please select something</option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
</select> 
</form> 

En este ejemplo, la opción permanece visible para el usuario, pero no se puede hacer clic en ella.

+0

no. elimine esta opción cuando el usuario haga clic para abrir el menú de selección y regrese al estado predeterminado cuando el usuario cierre el menú. ¿Está limpio? –

+0

pregunta actualizada. Por favor revisa –

+0

¿Quizás 'onfocus' /' onblur' entonces? onfocus elimina el nodo, onblur vuelve a unirlo. Sin embargo, después de eliminar la opción "falso" cuando el usuario hace clic en el menú, no puede volver a seleccionar esa opción "falsa" (porque cada vez que vuelve a hacer clic en ella, se elimina la opción), entonces, ¿por qué le gustaría hacer? ¿ese? –

Cuestiones relacionadas