CODEWITHSUNDEEP
javascriptjquery
user934902
user934902

Reputation: 1204

On radio select display select

I am trying to hide and show a select form dropdown on radio select. When radio button 1 is selected the only select form that should show is #1 and when 2 is clicked only 2 should show

http://jsfiddle.net/X7ETk/2/

HTML

<div class="wrap">
   <ul>
       <li><input type="radio" name="r" value="1">1</li> 
       <li><input type="radio" name="r" value="2">2</li>
   </ul>
   <select name="1s" id="1s">
       <option>Select drop 1</option>
       <option>Select drop 2</option>
   </select>
   <select name="2s" id="2s">
       <option>Select drop 2</option>
   </select>
</div>

Jquery

$('input[type=radio]').click(function() {(
     var getVal = $(this).val();

     if(getVal == 1) {
         $('#2s').hide();
         $('#1s').fadeIn();
     } else {
         $('#1s').hide();
         $('#2s').fadeIn();
     }
});

Upvotes: 1

Views: 46

Answers (1)

Hanlet Esca&#241;o
Hanlet Esca&#241;o

Reputation: 17380

You have an extra ( in there (first line), change it to this:

$('input[type=radio]').click(function() {
     var getVal = $(this).val();

     if(getVal == 1) {
         $('#2s').hide();
         $('#1s').fadeIn();
     } else {
         $('#1s').hide();
         $('#2s').fadeIn();
     }
});

http://jsfiddle.net/X7ETk/3/

When you have unexpected things like this happening, always look at the console, it might save you hours.

Upvotes: 3

Related Questions