I'am new to jquery and maybe this is a stupid question but I have searched for an answer just about everywhere without finding one. So, here we go:
I want to show different content depending on what option I select in a drop down form. As I have learnt here on StackOverflow, you ca use the change function to do this:
Example:
<script type="text/javascript">
$(document).ready(function() {
$('#myselector').change(function(){
$('.statecontent').hide();
$('#' + $(this).val()).show();
});
});
</script>
<select id="myselector">
<option value="state1"></option><br />
<option value="state2"></option><br />
<option value="state3"></option><br />
</select>
<div id="state1" class="statecontent">State1 Specific Page Content Goes here</div><br />
<div id="state2" class="statecontent">State2 Specific Page Content Goes here</div><br />
<div id="state3" class="statecontent">State3 Specific Page Content Goes here</div><br />
This code will alove me to show content thats inside the different divs depending on what 'state' I choose in the drop down. But how do I connect the values of the drop down to a specific class instead of an id. The problem is of course that I want to show several divs that share a common class when i select a state in the drop down.
I would very much appreciate if anyone could point me in the right direction.
Paul
hasClass('status-10')) { $('. isHereSince'). hide(); } });
hide(speed,callback); $(selector). show(speed,callback); The optional speed parameter specifies the speed of the hiding/showing, and can take the following values: "slow", "fast", or milliseconds.
jQuery hide() MethodThe hide() method hides the selected elements. Tip: This is similar to the CSS property display:none. Note: Hidden elements will not be displayed at all (no longer affects the layout of the page). Tip: To show hidden elements, look at the show() method.
The toggle() method toggles between hide() and show() for the selected elements. This method checks the selected elements for visibility. show() is run if an element is hidden. hide() is run if an element is visible - This creates a toggle effect.
Read a jQuery doc about selectors. $("#someId")
selects the element havig someId
as id. $(".someClass")
selects the elements having someClass
as class. It uses the CSS3 notation. That's the heart of jQuery.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With