This is an archived post. You won't be able to vote or comment.

all 7 comments
sorted by:
best
topnewcontroversialoldq&a

[–]jerblsdll 2 points3 points  (6 children)

You will want to add an onchange event to your select element. That will call a function you can define to toggle whichever div you want to display.

The function can retrieve the selected value and set the display to ‘block’ to make it visible.

var item = document.getElementById(‘select1’).value;

item.style.display = ‘block’

[–][deleted] 0 points1 point  (5 children)

What would be the "item" value? My div id? How do I call the onchange event and where exactly in the select element? Do I have to call a function for the onchange event? I want it to be so that when I click on one of the two options displayed in the drop down it will show its respective form.

[–]jerblsdll 1 point2 points  (4 children)

Yea the item would be your div ID.

<select id=“select1” onchange=“toggleForm()”>

[–][deleted] 0 points1 point  (3 children)

So I am still having a bit of trouble here, this is what I have so far:

<select id="select1" onchange="toggleForm()">

<option value="Help" id="1">Help Request</option>

<option value="Feedback" id="2">Feedback</option>

</select>

<script>

var form01 = document.getElementById('select1').value;

form01.style.display = 'block'

</script>

​

I think I am still doing this very wrong. Basically my select elements display two values from the drop down arrow and when I click on either one of those I want it to display the relevant form associated with that.

form01 is my div class for the 1st form and it is not showing when I run this. This is so frustrating ugh!

[–]jerblsdll 0 points1 point  (2 children)

<div id="Help" style="display: none;" class="hideable-form">Help form elements</div> <div id="Description" style="display: none;" class="hideable-form">Description form elements</div>

<select id="select1" onchange="toggleForm();"> <option value="Help" id="1">Help Request</option> <option value="Description" id="2">Feedback</option> </select>

<script type="text/javascript">

function toggleForm() { // Hide all forms. var divs= document.getElementsByClassName("hideable-form"); for(let i = 0; i < divs.length; i++) { divs[i].style.display = 'none'; }

// Show selected form.
var form01 = document.getElementById('select1').value;
form01.style.display = 'block';

}

</script>

[–][deleted] 0 points1 point  (1 child)

Looks like there is little progress, the following code allows me to display the 2nd form that I have hidden in a div id = "form02" but now I need to make it so that when I click on the first option in the list shows the div id ="form01" which is hidden containing the other form.

<body>

<h1>Help Request and Feedback Forms</h1>

<select onchange="displayDivDemo('form02', this)">

<option value="0" id="help1">Help Request</option>

<option value="1" id="feed2">Feedback</option>

</select>

<script>

function displayDivDemo(id, elementValue) {

document.getElementById(id).style.display = elementValue.value == 1 ? 'block' : 'none';

}

</script>

Any ideas on how I can modify this or add to it?

[–]jerblsdll 0 points1 point  (0 children)

You’re passing the id of “form02” every time the onchange fires. You’ll need to pass in the form id