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

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

来源

2012-03-09 Shashi Roy

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

来源

2012-03-09 13:38:36

它的好吗..现在我可以理解我的问题中的一个错误。我不想处理空白字段。在这种情况下，文本框是不可见的。我希望它在我的表单中是不可见和活跃的，以防我选择其他人。我不想处理空白字段，因为它会在数据库中插入值时显示错误。 – 2012-03-09 13:50:57

对不起，在@ Umesh芯片...我无法得到这个工作，因为文本输入否定了选择选择由于某种原因。帮帮我？我的意思是，JavaScript的作品和一切，但它不会从下拉列表中的值POST ...只有文本输入 – gavin 2013-10-25 19:55:52

@gavin你有没有解决文本输入覆盖选择的问题，因为我有同样的问题？ – 2014-11-08 15:14:24

内联：

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

来源

2012-03-09 13:30:15 mplungjan

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

来源

2012-03-09 13:30:55

只需

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

来源

2012-03-09 13:32:14 CKKiller

为什么使用jQuery进行一些简单的javascript工作？ – 2012-03-09 13:33:09

更短，更整洁，这正是我使用，我总是有jquery反正 – CKKiller 2012-03-09 13:34:55

你应该在答案中提到。 OP可能会尝试这个答案，并最终得到许多错误：P – 2012-03-09 13:36:37

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

来源

2017-08-18 06:44:06 gongsun

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

回答

相关问题