2012-01-31 9 views
9

Ecco la mia casella di selezione:Rimozione di un "default" <option> in una casella di selezione

<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> 

voglio la possibilità Pick a choice! da rimuovere quando l'utente clicca sulla casella di selezione. Se l'utente fa clic altrove, l'opzione Pick a choice! ritorna. Non voglio che l'utente sia in grado di scegliere l'opzione Pick a choice!. Cosa dovrei fare?

+1

Avrai bisogno di usare JavaScript. Potresti prendere in considerazione l'utilizzo di una libreria JS, come [tag: jquery], [tag: mootools], [tag: scriptaculous] ... –

+0

È necessario scrivere alcuni Javascript per ottenere ciò. –

+0

Duplicato di http://stackoverflow.com/questions/5805059/select-placeholder ?? – craig1231

risposta

4

Senza alcun PHP o JavaScript per rimuovere dinamicamente l'opzione si dispone di un'altra opzione molto semplice che utilizzo regolarmente, questa è l'opzione disabled="disabled". L'opzione rimarrà ma l'utente non sarà in grado di selezionarlo.

L'errore con questo è se qualcuno invia semplicemente un modulo senza scegliere nulla che il valore vuoto verrà inviato nel modulo, ma è qui che entra in gioco la gestione della convalida.

Il tuo codice per "Scegli una scelta!" opzione avrà un aspetto simile a questo:

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

spero che aiuta.

+0

ho trovato questa risposta prima, ma non è sufficiente. "Scegli una scelta!" ho bisogno di essere completamente rimosso sto provando qualcosa in JQuery per metterlo in mostra: nessuno; invio risposta a breve Grazie per il tuo aiuto! –

+0

Apprezzo il feedback Charles, solo un consiglio per il futuro, se stai cercando le opzioni è meglio elencare le lingue con cui stai lavorando, preferibilmente elencandole nei tag ma anche nella domanda è OK. La ragione è che ho un numero di soluzioni con PHP che posso scrivere senza pensare, ce ne sono altre con JS e jQuery. Nota come nessuno ti ha dato una risposta usando jQuery - solo un commento con il suggerimento per provarlo, è molto perché non lo hai taggato come accettabile nella tua risposta, in più non ci sono precedenti tentativi mostrati con jQuery. Buona fortuna – Ryan

-1

$ ("# SelectID option: first"). Remove();

0

Ecco alcuni suggerimenti. Non so se questa suite è la tua esigenza. Solo

<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


Quindi, so che questo post è abbastanza vecchio ora, ma un css unica soluzione non è stato offerto ... Molto più efficace modo di realizzare questo. Notare che il primo <option> non ha un attributo di valore; questo gli permette di posizionare efficacemente.

#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

Grazie. non ho pensato una risposta come questa –

+1

Prego, penso. – Todd

Problemi correlati