javascript - jquery datepicker appearing after one option is selected -

the code below works fine, have make date picker appear when select defined option select list> let's use this, example:

$(function() {      $('#date').datepicker({          dateformat: 'dd-mm-yy',          altfield: '#thealtdate',          altformat: 'dd-mm-yyyy'      });  });    function showdp(cbox){      if (cbox.checked) {          $('#date').css({              display: "block"          });      } else {          $('#date').css({              display: "none"          });      }  }

<input type="checkbox" id="dpenable" onclick="showdp(this);">  <input id="date" type="text" style="display:none"/>    <select>      <option id='1'>1</option>      <option id='2'>2</option>      <option id='3'>3</option>  </select>

the date picker should appear when select option 2 , disappear when change 1 or 3. tried many solutions , selectors, etc., nothing working how supposed (i doing wrong, i'm pretty new in js). can please point me online resources or provide advice on how might achieve this? thanks.

you need watch change on select. when changes, can check selected option's id. in place of console.log(), can continue using .css() change display of datepicker.

$('select').on('change', function() {    if($(this).find('option:selected').prop('id') == 2)      console.log('datepicker displayed');    else      console.log('datepicker hidden');  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <select>      <option id='1'>1</option>      <option id='2'>2</option>      <option id='3'>3</option>  </select>