如何激活一個文本框，如果我在下拉框中選擇其他選項

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

如何激活一個文本框，如果我在下拉框中選擇其他選項

回答

相關問題