Want to show/hide text box having date picker when certain value is selected from drop down

Question

I have one drop down in which i have value Indian and Others, when i select Others from the Drop down then i want to show three text box in which two are having date picker and the third one is simple text box. I have written following code in html but im not getting Date picker in it. Tried a lot. And again when i click on Indian these three text box should hide and at the time of page loading these three text box should be hidden. I have this following imported file in my jsp for calendar. visafromdate and visatodate are to be datepicker.

    <script language="javascript" src="/js/reseller/popcalendar.js"></script>
    <link href="/css/reseller/popcalendar.css" rel="stylesheet" type="text/css">

Following Java script for validation for showing/hiding & date picker

    $(".visafromdate").each(function(){
        $(this).datepicker();
    });

    $(".visatodate").each(function(){
      $(this).datepicker();
    });   


    $('#nationality').change(function(){
       if($(this,':selected').val()=="indian")
       {
          $('label[for=other_nationality],input#other_nationality').hide();
          $('#othernationality').hide();
          $('label[for=visa_from_date],input#visa_from_date').hide();
          $('#visafromdate').hide();
          $('label[for=visa_to_date],input#visa_to_date').hide();
          $('#visatodate').hide();
       }
       if($(this,':selected').val()=="others")
       {
            $('#othernationality').show();
            $('label[for=other_nationality],input#other_nationality').show();
            $('#visafromdate').show();
            $('label[for=visa_from_date],input#visa_from_date').show();
            $('#visatodate').show();
            $('label[for=visa_to_date],input#visa_to_date').show();

       }
  });
  $('label[for=other_nationality],input#other_nationality').hide();
  $('#othernationality').hide();
  $('label[for=visa_from_date],input#visa_from_date').hide();
  $('#visafromdate').hide();
  $('label[for=visa_to_date],input#visa_to_date').hide();
  $('#visatodate').hide();`

And this i have written in the form tag

<label for="visa_from_date">Visa From Date</label>
<input type ="text" id="visafromdate"/>

<label for="visa_to_date">Visa To Date</label>
<input type ="text" id="visatodate"/>

<label for="other_nationality">Other Nationality</label>
<input type ="text" id="othernationality"/>

Can you please help me with it why it is not working?

Answer 1

It appears you are trying to reference the ids as if they were classes. Ids are referenced by hash (#)

Try this

    $("#visafromdate,#visatodate").datepicker();