JQuery DatePicker появляться после того, как один из вариантов выбран

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

Вам просто нужно посмотреть изменения на выбор. Когда он изменится, вы можете проверить идентификатор выбранной опции. Вместо 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 событие выбора вы можете связать функцию для отображения 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