Javascript 如果在下拉框中选择其他选项，如何激活文本框_Javascript_Html

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

javascript html

Javascript 如果在下拉框中选择其他选项，如何激活文本框,javascript,html,Javascript,Html,假设我在下拉框中有3个选项，分别是红色、蓝色和其他。如果用户选择选项作为其他选项，则应在其下方显示一个文本框，以绘制自己喜爱的颜色。我可以用颜色填充下拉框，但不知道如何使文本框在选择其他文本框时可见下拉框。我知道使用javascript是可以做到的，但我对javascript还是比较陌生的。谁能帮帮我吗出去这是我在html表单中实现的选择选项 <select name="color"> // color <option>pick a color&l

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

//颜色
挑选颜色
红色
蓝色
其他
//除非在下拉框中选择了其他文本框，否则此文本框应隐藏//直到

内联：

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

在

HTML

简单地


红色
蓝色
其他

编辑：需要JQuery插件

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


功能检查颜色（val）{
var元素=document.getElementById（'color'）；
如果（val==‘选择颜色’| val==‘其他’）
element.style.display='block'；
其他的
element.style.display='none'；
}
挑选颜色
红色
蓝色
其他

正如乌梅什·帕蒂尔的回答有评论说存在问题。我试图编辑答案并得到拒绝。并建议发布新答案。这段代码应该可以解决他们的问题（沙希·罗伊、加文、约翰·希金斯）


功能检查颜色（val）{
var元素=document.getElementById（'othercolor'）；
如果（val==‘其他’）
element.style.display='block'；
其他的
element.style.display='none'；
}
挑选颜色
红色
蓝色
其他

这将提交正确的表单响应（即大多数情况下选择值，当选择框设置为“其他”时输入值）。使用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();
    }
  });

更短、更整洁，这正是我所使用的，我总是附带jquery，不管怎样，你应该在回答中提到这一点。OP可能会尝试这个答案，结果会出现很多错误：好吧。。现在我能理解我问题中的一个错误了。我不想处理空白字段。在本例中，文本框是不可见的。我希望它在我的身体里是不可见的和活跃的，只有在我选择其他人的情况下。我不想处理空白字段，因为在数据库中插入vale时会显示错误。很抱歉插入@Umesh。。。我无法让它工作，因为文本输入由于某种原因否定了select选项。帮忙？我的意思是，javascript可以工作，但它不会发布下拉列表中的值。。。只有文本input@gavin您是否曾经解决过文本输入覆盖select的问题，因为我有相同的问题？@JohnHiggins我通过使用select值覆盖文本字段内容来解决它。这只是Javascript中的另一行。

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

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

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

<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[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();
    }
  });