JQuery onClick Hide and Show

JavaScript
1

Hey, I wanted to make a JQuery show/hide. I basically have a select box with two options in it. I would like it so if a user selects a certain option out of the select box to show a div and if they choose the other one to not show it.
I would also like it if the box is hidden by default.
Something like this:


<select>
<option>Show Box If This is Clicked</option>
<option>Hide Box If This is Clicked</option>
</select>

If anyone can help it would be greatly appreciated. I have seen many tutorials on how to do this with a link but I dont know how to edit it so it works with a select box. Thanks!

2

Give the select an identifier, so you can target that element to attach an event on to it, and place a value on each option, which will be used to trigger a div with the same identifier.

Please call your select something other than mySelect. Choose a name that best describes the purpose of the selection.


<select id="mySelect">
	<option value="showIfClicked">Show Box If This is Clicked</option>
	<option>Hide Box If This is Clicked</option>
</select>
<div id="showIfClicked">
	This content gets shown when the appropriate option is clicked.
</div>

And here’s the script. When the page loads it’ll set the select to unselected. This then ensures that the box is hidden by default.

Then it attaches a change event onto the select so that it hides all the appropriate boxes based on the option value, and then shows whichever one was chosen.

Finally it runs the event on the select box to activate the process as a part of the page load, which because nothing is selected hides all of the appropriate boxes.


$(document).ready(function () {
	var select = '#mySelect';
	$(select).attr('selectedIndex', '-1');
	$(select).change(function () {
		$(select + ' option').each(function () {
			$('#' + this.value).hide();
		});
		$(select + ' option:selected').each(function () {
			$('#' + this.value).show();
		});
	}).change();
});

I look forward to finding out if anyone has ideas on improving how this lot is chained together.

3

Hmm, for some reason it didnt work. It does not show anything when the show option or the hide option is clicked.

4

The test code works perfectly fine, so please, let us have a look at the code you’re using.

5

I didnt edit your code at all. I just copied and pasted it to a file and included the jquery js file. But here it is:


<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
    var select = '#mySelect';
    $(select).attr('selectedIndex', '-1');
    $(select).change(function () {
        $(select + ' option').each(function () {
            $('#' + this.value).hide();
        });
        $(selected + ' option:selected').each(function () {
            $('#' + this.value).show();
        });
    }).change();
});
</script>

<select id="mySelect">
    <option value="showIfClicked">Show Box If This is Clicked</option>
    <option>Hide Box If This is Clicked</option>
</select>
<div id="showIfClicked">
    This content gets shown when the appropriate option is clicked.
</div>

Thanks.

6

This works for me

<script type="text/javascript">
$(document).ready(function () {

    $("#mySelect").change(function () {
         $("#mySelect option:selected").each(function ()
		{
         	if($(this).attr("id") == "showOption")
			{
				$("#showIfClicked").show();
			}
			else
			{
				$("#showIfClicked").hide();
			}
        });
    }).change();
});
</script>

--------

<select id="mySelect">
    <option id="showOption">Show Box If This is Clicked</option>
    <option id="hideOption">Hide Box If This is Clicked</option>
</select>
<div id="showIfClicked">
    This content gets shown when the appropriate option is clicked.
</div>
7

Sorry man, there was a spelling mistake where selected should be select

$(select + ’ option:selected’).each(function () {

8

That worked. Thanks!