Jquery Datepicker nach einer Option erscheint, wird ausgewählt

Question

Der folgende Code funktioniert gut, aber jetzt muss ich Datumsauswahl erscheinen, wenn ich eine bestimmte Option aus der Auswahlliste auswählen> ist so etwas wie diese verwenden lassen, zum Beispiel:

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

Das sollte Datumsauswahl angezeigt, wenn ich Option 2 und verschwinden, wenn ich es auf 1 oder 3 ändern sich viele Lösungen und Selektoren ich versuchte, etc., aber nichts funktionierte, wie es sollte (Ich habe wahrscheinlich etwas falsch gemacht, ich bin ziemlich neu in JS). Kann mir bitte jemand auf Online-Ressourcen verweisen oder Ratschläge geben, wie ich das erreichen könnte? Vielen Dank.

Answer 1

Sie müssen nur auf Änderung auf der Auswahl achten. Wenn es sich ändert, können Sie die ID der ausgewählten Option überprüfen. Anstelle der console.log() können Sie weiterhin .css() verwenden, um die Anzeige Ihres Datepickers zu ändern.

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

wie die Sie interessieren ...

Onchange Fall wählen können Sie die Funktion machen binden, um die Datepicker auf dem aktuellen Wert der ausgewählten Basis anzuzeigen,

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