选择一个选项后出现jquery datepicker [英] jquery datepicker appearing after one option is selected

问题描述

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

The code below works just fine, but now I have to make date picker appear when I select a defined option from the select list> Let's use something like this, for 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>

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

The Date picker should appear when I select option 2 and disappear when I change it to 1 or 3. I tried many solutions and selectors, etc., but nothing was working how it was supposed to (I was probably doing something wrong, I'm pretty new in JS). Can anyone please point me to online resources or provide advice on how I might achieve this? Thanks.

推荐答案

您只需要注意所选内容的更改.更改后，您可以检查所选选项的ID.代替console.log()，您可以继续使用.css()更改日期选择器的显示.

You just need to watch for change on the select. When it changes, you can check the selected option's id. In place of the console.log(), you can continue using .css() to change the display of your datepicker.

$('select').on('change', function() {
  if($(this).find('option:selected').prop('id') == 2)
    console.log('datepicker is displayed');
  else
    console.log('datepicker is 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>

这篇关于选择一个选项后出现jquery datepicker的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！