Member Avatar for numele

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
  • 283 Views
  • 19 Hours Discussion Span
  • Latest Post Latest Post by AleMonteiro
Member Avatar for GliderPilot

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";
}
Member Avatar for AleMonteiro

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;
}
Member Avatar for numele

Thank you! AleMonteiro your suggestion did the trick.

Member Avatar for AleMonteiro

You are welcome.

Mark the tread as solved please.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.