Reputation: 781
i have question about selectbox div show hide... first , this is my source
HTML:
<Select id="colorselector">
<option value="red">Red</option>
<option value="yellow">Yellow</option>
<option value="blue">Blue</option>
</Select>
<a href="#"><span>Go</span></a>
<div id="red" class="colors" style="display:none"> red... </div>
<div id="yellow" class="colors" style="display:none"> yellow.. </div>
<div id="blue" class="colors" style="display:none"> blue.. </div>
JS:
$(function() {
$('#colorselector').change(function(){
$('.colors').hide();
$('#' + $(this).val()).show();
});
});
Demo: http://jsfiddle.net/FvMYz/1345/
when i select Red, the Red Div show... but i want to change to... Adding Go button. but its hard to make it... anyone can help me ?
Upvotes: 0
Views: 178
Reputation: 1039
My answer is almost the same as the above however I would place a class or id on the href triggering the event and also the .on() method since .click is now been deprecated. .click() simply runs a function through to .on() so basically your calling .on() through .click() where you can just simply directly call .on(). What's also nice about .on() is you can bind multipe event listeners types to one single selector easily by doing something like this:
$(something).on('click, mouseover', function() { // whatever });
$(function() {
$('a[href="#"]').on('click', function() {
$('.colors').hide();
$('#'+ $('#colorselector').val()).show();
});
});
Upvotes: 1