javascript - 选择一个选项后出现的jquery日期选择器

Question

下面的代码工作得很好，但现在当我从选择列表中选择一个定义的选项时，我必须让日期选择器出现>让我们使用这样的东西，例如:

$(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>

当我选择选项 2 时，日期选择器应该出现，当我将其更改为 1 或 3 时，日期选择器应该消失。我尝试了很多解决方案和选择器等，但没有任何效果按预期工作(我可能做错了什么，我对 JS 还很陌生)。任何人都可以向我指出在线资源或提供有关如何实现这一目标的建议吗？谢谢。

Answer 1

尝试这样...

select 的 onchange 事件可以绑定(bind)函数以根据 select 的当前值显示日期选择器，

   $(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"
   });
 }}
 
 function showDPNew(select)
 {
 if ($(select).val() == 2) {
   $('#date').css({
 display: "block"
   });
   
   $("#date").focus();
 }
 else{
   $('#date').css({
 display: "none"
   });
   
$("#date").blur();
 }}

   <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<select onChange="showDPNew(this)">
<option id='1'>1</option>
<option id='2'>2</option>
<option id='3'>3</option>
  </select>
  
  <input id="date" type="text" style="display:none"/>

笨蛋:https://plnkr.co/edit/SxRHSd497Xk20Gxm9RqU?p=preview