如果我在下拉框中选择其他选项，如何激活文本框答案

【问题标题】：how to activate a textbox if I select an other option in drop down box如果我在下拉框中选择其他选项，如何激活文本框
【发布时间】：2012-03-09 13:25:51
【问题描述】：

假设我在下拉框中有 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

【问题讨论】：

标签： javascript html

【解决方案1】：

以下是您需要编写的核心 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>

【讨论】：

没关系..现在我可以理解我的问题中的一个错误。我不想处理空白字段。在这种情况下，文本框是不可见的。我希望它在我的表单中不可见并且只有在我选择其他人的情况下才处于活动状态。我不想处理空白字段，因为在数据库中插入 vale 时会显示错误。
抱歉插入@Umesh...我无法让它工作，因为文本输入由于某种原因否定了选择选项。帮助？我的意思是，javascript 可以正常工作，但它不会从下拉列表中发布值......只有文本输入
@gavin 你有没有解决过文本输入覆盖选择的问题，因为我有同样的问题？
@JohnHiggins 我通过用选择值覆盖文本字段内容来解决它。这只是 Else 下 Javascript 中的另一行。

【解决方案2】：

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

【讨论】：

【解决方案3】：

内联：

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

我曾经这样做过

在头部（给选择一个 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');
      }
    }
  }
}

【讨论】：

【解决方案4】：

正如 Umesh Patil 的回答有评论说有问题。我尝试编辑答案并被拒绝。并获得建议发布新答案。这段代码应该可以解决他们遇到的问题（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>

【讨论】：

【解决方案5】：

简单

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

【讨论】：

更短更整洁，这正是我使用的，反正我总是附加jquery
您应该在答案中提到这一点。 OP 可能会尝试这个答案并最终得到很多错误：P

【解决方案6】：

这将提交正确的表单响应（即，大多数时间选择值，以及选择框设置为“其他”时的输入值）。使用 jQuery：

  $("select[name="color"]").change(function(){
    new_value = $(this).val();
    if (new_value == "others") {
      $('input[name="color"]').show();      
    } else {
      $('input[name="color"]').val(new_value);
      $('input[name="color"]').hide();
    }
  });

【讨论】：