javascript - Jquery change function is not working? -

i trying change css of 2 divs on change in select tag when specific value selected can please take on code 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 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 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>

there 2 problems:

1. there no elseif in javascript, should use else if instead.

2. since ids contain . should escape them, otherwise jquery tries select element has boss id , az class name.

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