Dynamic/ dependent input box_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-01-04 00:38 出处：网络

How can i make a input box that appears only when i select a value from a drop down box? thank you, Sebastian

相关专题：javascript

How can i make a input box that appears only when i select a value from a drop down box?

thank you, Sebastian

EDIT-1:

thanks guys for the help. but the example from sushil bharwani is best for me, because i also need to display a text with the text box.

but with that example i have a problem. both the text and the text box look like they are in the same cell, so they are 开发者_StackOverflow社区messing up my layout for the form. Got any ideas?

thanks,

You'll want to define the select's onchange attribute to check the text (or value) of the selected option:

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

For further details, you can read more about HTML DOM objects and how to access them via javascript:

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

Consider that the textbox should show when choice 2 is selected

The dropdown box

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

the input box

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

the onchange function

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

Demo here

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

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