как активировать текстовое поле, если я выберу другую опцию в выпадающем списке

Предположим, у меня есть 3 варианта в выпадающем списке, скажем, красный, синий и другие. Если пользователь выбирает параметр в качестве другого, то под текстовым полем должно быть видно его собственный любимый цвет. Я могу заполнить раскрывающийся список цветами, но не знаю, как сделать текстовое поле видимым при выборе других в раскрывающемся списке. Я знаю, что с помощью javascript это возможно, но я совершенно новичок в javascript. кто-нибудь может помочь мне ??

Это вариант выбора, который я реализую в моей 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

Ответы на вопрос(5)

Решение Вопроса

Ниже приведен основной код JavaScript, который нужно написать:

<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>
 John Higgins08 нояб. 2014 г., 16:14
@ gavin Вы когда-нибудь решали проблему с вводом текста, перезаписывающего select, поскольку у меня такая же проблема?
 Shashi Roy09 мар. 2012 г., 14:50
все в порядке .. теперь я могу понять ошибку в моем вопросе. Я не хочу обрабатывать пустое поле. Вот в этом случае текстовое поле просто невидимо. Я хочу, чтобы он был невидимым и активным в моей форме, только если я выберу других. Я не хочу обрабатывать пустое поле, потому что он покажет ошибку при вставке в базу данных vale.
 gavin25 окт. 2013 г., 21:55
Извините, что добавил чип в @Umesh ... Я не могу заставить это работать, потому что ввод текста отменяет опции выбора по некоторым причинам. ПОМОГИТЕ? Я имею в виду, javascript работает и все, но он не будет помещать значения из выпадающего списка ... только ввод текста

Просто

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

редактировать: требуется плагин JQuery

 CKKiller09 мар. 2012 г., 14:34
короче и аккуратнее, это именно то, что я использую, у меня все равно всегда есть jquery
 Clyde Lobo09 мар. 2012 г., 14:36
Вы должны были упомянуть это в ответе. ОП может попробовать этот ответ и в итоге получит много ошибок: P
 Clyde Lobo09 мар. 2012 г., 14:33
зачем использовать jQuery для какой-то тривиальной работы javascript?

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

что проблема есть. Я пытаюсь редактировать ответ и получаю отказ. И получите предложение опубликовать новый ответ. Этот код должен решить проблему, с которой они столкнулись (Шаши Рой, Гавен, Джон Хиггинс).

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

В линию:

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

Я делал это

В голове (дайте выбрать удостоверение личности):

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

Ваш ответ на вопрос