Question

下面的代码工作正常，但是当我从选择列表＆gt;中选择一个已定义的选项时，我必须显示日期选择器。让我们使用类似的东西，例如：

＆＃13;

v_option

＆＃13;

$(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"
        });
    }
}

＆＃13;

当我选择选项2时会出现日期选择器，当我将其更改为1或3时会消失。我尝试了许多解决方案和选择器等，但没有任何工作原理（我可能做错了什么），我在JS中很新。）有谁可以请我指向在线资源或提供有关如何实现这一目标的建议？谢谢。

Answer 1

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

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

Answer 2

试试这个......

选择

onchange事件你可以根据select的当前值绑定函数显示datepicker，

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

Plunker：https://plnkr.co/edit/SxRHSd497Xk20Gxm9RqU?p=preview

选择一个选项后出现jquery datepicker

2 个答案: