jak aktywować pole tekstowe, jeśli wybiorę inną opcję w rozwijanym polu

załóżmy, że mam 3 opcje w rozwijanym polu powiedzmy czerwony, niebieski, inne. Jeśli użytkownik wybierze opcję jako inny, wówczas poniżej pola tekstowego powinno być widoczne, aby poprawić swój ulubiony kolor. Mogę wypełnić pole rozwijane kolorami, ale nie wiem, jak wyświetlić pole tekstowe widoczne w zaznaczeniu innych w rozwijanym polu . Wiem, że używając javascript można to zrobić, ale ja jestem całkiem nowy w javascript. Czy ktoś może mi pomóc obecnie?jak aktywować pole tekstowe, jeśli wybiorę inną opcję w rozwijanym polu

To wybierz opcję Jestem wykonawczych w moim formularzu 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

Źródło

2012-03-09 Shashi Roy

Poniżej jest rdzeniem JavaScript trzeba napisać:

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

Źródło

2012-03-09 13:38:36

jest w porządku .. teraz mogę zrozumieć błąd w moim pytaniu. Nie chcę przetwarzać pustego pola. Tutaj w tym przypadku pole tekstowe jest po prostu niewidoczne. Chcę, aby była ona niewidoczna i aktywna w mojej formie tylko w przypadku, gdy wybiorę inne osoby. Nie chcę przetwarzać pustego pola, ponieważ spowoduje to błąd podczas wstawiania vale do bazy danych. –

Przepraszam za chip w @Umesh ... Nie mogę tego zrobić, ponieważ wprowadzanie tekstu neguje wybrane opcje z jakiegoś powodu. WSPARCIE? Mam na myśli, javascript działa i wszystko, ale nie będzie POST wartości z rozwijanego menu ... tylko wprowadzanie tekstu – gavin

@gavin Czy kiedykolwiek rozwiązałeś problem wprowadzania tekstu nadpisując select, ponieważ mam ten sam problem ? –

Inline:

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

kiedyś zrobić to

w głowicy (podać select identyfikator):

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'); 
     } 
    } 
    } 
}

Źródło

2012-03-09 13:30:15 mplungjan

Coded przykład w 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'; 
}

Źródło

2012-03-09 13:30:55

Wystarczy

<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: wymaga wtyczki JQuery

Źródło

2012-03-09 13:32:14 CKKiller

po co używać jQuery do jakiejś banalnej pracy z javascript? –

krótszy i bardziej schludny, to jest to, co używam, zawsze mam dołączone jquery i tak – CKKiller

Powinieneś był wspomnieć, że w odpowiedzi. OP może spróbować tej odpowiedzi i kończy się na otrzymaniu wielu błędów: P –

Jak Umesh Patil odpowiedzi mają komentarz powiedzieć, że nie ma problemu. Próbuję edytować odpowiedź i odrzucić. I zasugeruj, aby opublikować nową odpowiedź. Ten kod powinien rozwiązać problem, który mają (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>

Źródło

2017-08-18 06:44:06 gongsun

jak aktywować pole tekstowe, jeśli wybiorę inną opcję w rozwijanym polu

Odpowiedz

Powiązane problemy