動態/依賴輸入框

如何製作僅在從下拉框中選擇值時纔出現的輸入框？動態/依賴輸入框

謝謝你，塞巴斯蒂安

編輯-1：

謝謝你們的幫助。但sushil bharwani的例子最適合我，因爲我也需要在文本框中顯示文本。

但與那個例子我有一個問題。文本和文本框看起來像是在同一個單元格中，所以他們搞亂了我的表單佈局。有什麼想法嗎？

感謝，

來源

2010-06-17 sebastian

-1

http://bytes.com/topic/javascript/answers/88791-show-hide-text-form-field-based-drop-down-selection

來源

2010-06-17 14:30:53

你要定義選擇的onchange屬性檢查所選選項的文本（或價值）：

<script type="text/javascript"> 
function checkSelect(el) { 
    if (el.options[el.selectedIndex].text.length > 0) 
    document.getElementById('text1').style.display = 'block'; 
    else 
    document.getElementById('text1').style.display = 'none'; 
} 
</script> 

<select onchange="checkSelect(this)"> 
<option></option> 
<option>Val 1</option> 
</select> 

<input type="text" id="text1" style="display:none" />

欲知詳情，您可以閱讀更多關於HTML DOM對象以及如何通過javascript訪問它們的信息：

http://www.w3schools.com/jsref/default.asp

來源

2010-06-17 14:44:49 webbiedave

考慮的是，當選擇2被選擇

下拉框中

<select id="dropBox" size="1" onChange="dropBoxChng();"> 
    <option value="1">Choice 1</option> 
    <option value="2">Choice 2</option> 
    <option value="3">Choice 3</option> 
    <option value="4">Other</option> 
</select>

輸入框

<input type="text" id="txtBox" style="display:none">

的平變化函數

function dropBoxChng(){ 
    if(document.getElementById('dropBox').value == 2){ 
     document.getElementById('txtBox').style.display = 'block'; 
    } 
}

演示文本框應顯示here

來源

2010-06-17 14:51:30

<html> 
<head> 
<style type="text/css"> 
input { 
    font-family: Arial, Sans-Serif; 
    font-size: 13px; 
    margin-bottom: 5px; 
    display: block; 
    padding: 4px; 
    border: solid 1px #85b1de; 
    width: 300px; 
    background-color: #EDF2F7; 
} 

option { 
color: white; 
background-color: blue; 
} 

.even { 
    background-color: red; 
    color: blue; 
} 
</style> 
<script> 
function replaceElement(){ 
    var select=document.getElementById('mySelectMenu'); 
    var chosenoption=select.options[select.selectedIndex]; 
    var oChild= document.getElementsByTagName('input'); 
    var br1= document.getElementsByTagName('br'); 
    var temp=br1.length; 
    for(var i=0; i<temp; i++){ 
     alert("remove input box " + i); 
     myform.removeChild(oChild[0]); 
     alert("remove br " + i); 
     myform.removeChild(br1[0]); 
    } 
    for(var i=0; i<chosenoption.value; i++){ 
     alert("add br " + i); 
     var br2 = document.createElement('br'); 
     myform.appendChild(br2); 
     alert("add input box " + i); 
     var oNewChild=document.createElement('input'); 
     oNewChild.type='text'; 
     oNewChild.size=6; 
     myform.appendChild(oNewChild); 
    } 
} 
</script> 
</head> 
<body> 
<form id="myform"> 
<select id="mySelectMenu" onchange="replaceElement()"> 
    <option value="1">1</option> 
    <option value="2" class="even">2</option> 
    <option value="3">3</option> 
    <option value="4" class="even">4</option> 
    <option value="5">5</option> 
</select> 
</form> 
</body> 
</html>

來源

2011-07-13 14:05:12 weirdFactory

動態/依賴輸入框

回答

相關問題