come attivare una casella di testo se seleziono un'altra opzione nella casella a discesa

supponiamo di avere 3 opzioni in una casella a discesa dire rosso, blu, altre. Se un utente seleziona un'opzione come un altro, allora sotto una casella di testo dovrebbe essere visibile per svuotare il proprio colore preferito. Posso popolare la casella a discesa con i colori ma non so come rendere visibile la casella di testo sulla selezione di altri nella casella a discesa . So che usando javascript è possibile farlo, ma sono abbastanza nuovo per javascript. qualcuno può aiutarmi per favore fuori ??come attivare una casella di testo se seleziono un'altra opzione nella casella a discesa

Questa è l'opzione di selezione che sono l'attuazione nel mio form html

<select name="color"> // color 
    <option>pick a color</option> 
    <option value="red">RED</option> 
    <option value="blue">BLUE</option> 
    <option value="others">others</option> 
</select> 

<input type="text" name="color" id="color" /></td> // this textbox should be hidden //until unless others is selected in the drop down box

fonte

2012-03-09 Shashi Roy

Sotto è il core JavaScript che devi scrivere:

<html> 
<head> 
<script type="text/javascript"> 
function CheckColors(val){ 
var element=document.getElementById('color'); 
if(val=='pick a color'||val=='others') 
    element.style.display='block'; 
else 
    element.style.display='none'; 
} 

</script> 
</head> 
<body> 
    <select name="color" onchange='CheckColors(this.value);'> 
    <option>pick a color</option> 
    <option value="red">RED</option> 
    <option value="blue">BLUE</option> 
    <option value="others">others</option> 
    </select> 
<input type="text" name="color" id="color" style='display:none;'/> 
</body> 
</html>

fonte

2012-03-09 13:38:36

va bene .. ora posso capire un errore nella mia domanda. Non voglio elaborare un campo vuoto. Qui in questo caso la casella di testo è semplicemente invisibile. Voglio che sia invisibile e attivo nella mia forma solo nel caso in cui selezionassi gli altri. Non voglio elaborare un campo vuoto perché mostrerà un errore durante l'inserimento vale nel database. –

Ci scusiamo per il chip in @Umesh ... Non riesco a farlo funzionare perché l'input di testo nega le opzioni di selezione per qualche motivo. AIUTO? Voglio dire, il javascript funziona e tutto ma non POST i valori dal menu a discesa ... solo l'immissione di testo – gavin

@gavin Hai mai risolto il problema dell'input di testo sovrascrivendo la selezione poiché ho lo stesso problema ? –

Inline:

<select 
onchange="var val = this.options[this.selectedIndex].value; 
this.form.color[1].style.display=(val=='others')?'block':'none'">

ho usato per fare questo

Nella testa (dare Selezionare un ID):

window.onload=function() { 
    var sel = document.getElementById('color'); 
    sel.onchange=function() { 
    var val = this.options[this.selectedIndex].value; 
    if (val == 'others') { 
     var newOption = prompt('Your own color',''); 
     if (newOption) { 
     this.options[this.options.length-1].text = newOption; 
     this.options[this.options.length-1].value = newOption; 
     this.options[this.options.length] = new Option('other','other'); 
     } 
    } 
    } 
}

fonte

2012-03-09 13:30:15 mplungjan

codificati un esempio a http://jsbin.com/orisuv

HTML

<select name="color" onchange='checkvalue(this.value)'> 
    <option>pick a color</option> 
    <option value="red">RED</option> 
    <option value="blue">BLUE</option> 
    <option value="others">others</option> 
</select> 
<input type="text" name="color" id="color" style='display:none'/>

Javascript

function checkvalue(val) 
{ 
    if(val==="others") 
     document.getElementById('color').style.display='block'; 
    else 
     document.getElementById('color').style.display='none'; 
}

fonte

2012-03-09 13:30:55

Semplicemente

<select id = 'color2' 
     name = 'color' 
     onchange = "if ($('#color2').val() == 'others') { 
         $('#color').show(); 
        } else { 
         $('#color').hide(); 
        }"> 
    <option value="red">RED</option> 
    <option value="blue">BLUE</option> 
    <option value="others">others</option> 
</select> 

<input type = 'text' 
     name = 'color' 
     id = 'color' />

edit: richiede plugin jQuery

fonte

2012-03-09 13:32:14 CKKiller

perché utilizzare jQuery per alcuni lavori javascript banali? –

più corto e più ordinato, è proprio quello che uso, ho sempre collegato jquery in ogni caso – CKKiller

Avresti dovuto accennarlo nella risposta. L'OP potrebbe provare questa risposta e finire per ottenere molti errori: P –

Come risposta di Umesh Patil dire che c'è un problema. Cerco di modificare la risposta e ottenere il rifiuto. E chiedi suggerimento di inviare una nuova risposta. Questo codice dovrebbe risolvere il problema che hanno (Shashi Roy, Gaven, John Higgins).

<html> 
<head> 
<script type="text/javascript"> 
function CheckColors(val){ 
var element=document.getElementById('othercolor'); 
if(val=='others') 
    element.style.display='block'; 
else 
    element.style.display='none'; 
} 

</script> 
</head> 
<body> 
    <select name="color" onchange='CheckColors(this.value);'> 
    <option>pick a color</option> 
    <option value="red">RED</option> 
    <option value="blue">BLUE</option> 
    <option value="others">others</option> 
    </select> 
<input type="text" name="othercolor" id="othercolor" style='display:none;'/> 
</body> 
</html>

fonte

2017-08-18 06:44:06 gongsun

come attivare una casella di testo se seleziono un'altra opzione nella casella a discesa

risposta

Problemi correlati