Jquery change function is not working?

Question

I am trying to change css of two divs on a change in a select tag when specific value is selected so can you please take a look over my code that what am I doing wrong?

 $(document).ready(function() { $('#ads_site').change(function() { if ($(this).val() == 'boss.az') { $("#boss.az").css("display", "block"); } elseif($(this).val() == 'jobsearch.az') { $("#jobsearch.az").css("display", "block"); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form method="post" action="process.php"> <select name="ads_site" id="ads_site"> <option value="boss.az">boss.az</option> <option value="jobsearch.az">jobsearch.az</option> </select> <div id="boss.az" style="display:none;"> <center> <h3>::Ads To Be Added::</h3> </center> <br> <input type="text" class="from_page" name="from_page" placeholder="From Page No"> <input type="text" class="to_page" name="to_page" placeholder="To Page No"> </div> <div id="jobsearch.az" style="display:none;"> <center> <h3>::Ads To Be Added::</h3> </center> <br> <input type="text" class="from_ad" name="from_page" placeholder="From Ad No"> <input type="text" class="to_ad" name="to_page" placeholder="To Ad No"> </div> <input type="submit" name="submit" class="login login-submit" value="Submit"> </form> 

Answer 1

There are 2 problems:

1. There is no elseif in JavaScript, you should use else if instead.

2. Since your IDs contain . you should escape them, otherwise jQuery tries to select an element that has boss ID and az class name.

    $(document).ready(function () { $('#ads_site').change(function () { if ( this.value === 'boss.az' ) { $("#boss\\\\.az").show(); // in case that you want to hide the other element // $("#jobsearch\\\\.az").hide(); } else if ( this.value === 'jobsearch.az' ) { $("#jobsearch\\\\.az").show(); } }); });