0

When an item is selected in the drop down it will show a text box, but when another item is selected the text box stays and it keeps adding to the end. I need to be able to have only the text box appear that goes with the item.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
  <style>
.hide{
display:none;
}
</style>
<script type="text/javascript">

function handleSelection(choice) {
document.getElementById('select').disabled=false;
document.getElementById(choice).style.display="block"
}
</script>
</head>

<body>
<select id="select" onChange="handleSelection(value)" size="3">
<option value="choice1">choice1</option>
<option value="choice2">choice2</option>
<option value="choice3">choice3</option>
</select>

<div class="hide" id="choice1">
<input type="text"></input><br />
<input type="text"></input><br />
</div>

<div class="hide" id="choice2">
<input type="text"><br />
</div>

<div class="hide" id="choice3">
<input type="text"><br />
<input type="text"><br />
</div>

</body>
</html>
3
Contributors
4
Replies
11
Views
4 Years
Discussion Span
Last Post by AleMonteiro
0

The easiest way is can hide all than re-display the one you want:

function handleSelection(choice) {
  document.getElementsByClassName('hide').style.display="none";
  document.getElementById('select').disabled=false;
  document.getElementById(choice).style.display="block";
}
0

This should do the trick:

var lastSelection = undefined;

function handleSelection(choice) {
    document.getElementById('select').disabled=false;
    document.getElementById(choice).style.display="block";

    if ( lastSelection != undefined ) {
        document.getElementById(lastSelection).style.display="none";
    }

    lastSelection = choice;
}
0

Thank you! AleMonteiro your suggestion did the trick.

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.