CODEWITHSUNDEEP
jquery
user1833620
user1833620

Reputation: 781

selectbox show hide

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

Answers (2)

Tom Bird
Tom Bird

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

greener
greener

Reputation: 5069

Is this what you have in mind?

 $(function() {
        $('a').click(function(){
            $('.colors').hide();
            $('#' + $('#colorselector').val()).show();
        });
    });

JSFIDDLE

Upvotes: 1

Related Questions