Dynamic form's javascript not working when removed { } from select tag-Rails

Question

I have a form with a gender field in rails as:

<%= f.select :gender, ["Male","Female"],{class: "gender"} %>  

i also tried it with this:

<%= f.select :gender, ["Male","Female"],{class: "gender"},onclick: "categorychange" %>

But it's not working. Now when I Tried:

<%= f.select :gender, ["Male","Female"],{},{class: "gender"} %>  

That's working all fine. which I found here.
I didn't get what the { } stands for.

and for different gender I have different corresponding field to show which are as follows:

<div class="male">
//male fields here//
</div>  

<div class="female">
//female fields here//
</div>  

I have the javascript as:

function categorychange(){
var val = $(this).val();
var gender = $(this).parent().find(".gender")
if (gender.val() == 'Male')
{
  $(this).parent().find('.male').show();  
  $(this).parent().find('.female').hide();
}
else if (gender.val()=='Female')
{
 $(this).parent().find('.male').hide();  
 $(this).parent().find('.female').show();
}  

But the javascript is not working. It shows both the div's.

Answer 1

var select_gender = $('.gender')
select_gender.change(function(){
if (select_gender.val() == 'Male')
{
  $('.male').show();  
  $('.female').hide();
}
else if (select_gender.val()=='Female')
{
 $('.male').hide();  
 $('.female').show();
}}

Rather than using onclick on the view, try onchange event in the javascript for the select input.