I am trying to change the dropdown value when particular date is selected.. For eg if the user selects 25-12-2021 the dropdown value has to be different..How can i change the dropdown value. I want to change the dropdown value when user selects 25-12-2021
Here is the code
<script type="text/javascript">
$(function() {
$("#txtDate").change(function() {
var numbers = ['6:30AM (English)'];
var numbers1 = ['7:00AM (English)'];
var numbers2 = ['6:30AM (English)'];
var numbers4 = ['7:30AM (English)'];
var selDate = new Date(this.value);
var option = '';
$('#items').html('');
if (selDate.getDay() == 0) { //If sunday, can change your logic here
for (var i=0;i<numbers1.length;i++){
$('<option/>').val(numbers1[i]).html(numbers1[i]).appendTo('#items');
}
}
else if(selDate.getDay() == 6){ //On saturday
for (var j=0;j<numbers2.length;j++){
$('<option/>').val(numbers2[j]).html(numbers2[j]).appendTo('#items');
}
}
else if(selDate.getDate() == '2021-12-25'){ //On 2021-12-25
for (var l=0;l<numbers4.length;j++){
$('<option/>').val(numbers4[l]).html(numbers4[l]).appendTo('#items');
}
}
else {
for (var k=0;k<numbers.length;k++){ //On weekdays
option += '<option value="'+ numbers[k] + '">' + numbers[k] + '</option>';
}
$('#items').append(option);
}
})
});
</script>
<input type="date" name="date" id="txtDate" required="required" class="col-md-12" value="<?php if(isset($_GET['date'])) { echo $_GET['date']; } ?>" />
</div>
<div class="col-md-4">
<label>Select Mass<span style="color:red";> * </span></label>
<select class="col-md-12" id='items' name="day">
<option value="">---SELECT---</option>
</select>
</div>
You can check the value of the input directly, as in
...
} else if ($(this).val() === '2021-12-25') {
...
Also you had a typo in this line
for (var l = 0; l < numbers4.length; l++) {
$(function() {
$("#txtDate").change(function() {
var selDate = new Date($(this).val());
// console.log($(this).val(), selDate)
var numbers = ['6:30AM (English)'];
var numbers1 = ['7:00AM (English)'];
var numbers2 = ['6:30AM (English)'];
var numbers4 = ['7:30AM (English)'];
var option = '';
$('#items').html('');
if (selDate.getDay() == 0) { //If sunday, can change your logic here
for (var i = 0; i < numbers1.length; i++) {
$('<option/>').val(numbers1[i]).html(numbers1[i]).appendTo('#items');
}
}
else if ($(this).val() === '2021-12-25') { //On 2021-12-25
for (var l = 0; l < numbers4.length; l++) {
$('<option/>').val(numbers4[l]).html(numbers4[l]).appendTo('#items');
}
}
else if (selDate.getDay() == 6) { //On saturday
for (var j = 0; j < numbers2.length; j++) {
$('<option/>').val(numbers2[j]).html(numbers2[j]).appendTo('#items');
}
} else {
for (var k = 0; k < numbers.length; k++) { //On weekdays
option += '<option value="' + numbers[k] + '">' + numbers[k] + '</option>';
}
$('#items').append(option);
}
})
}); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="date" name="date" id="txtDate" required="required" class="col-md-12" value="<?php if(isset($_GET['date'])) { echo $_GET['date']; } ?>" />
</div>
<div class="col-md-4">
<label>Select Mass<span style="color:red";> * </span></label>
<select class="col-md-12" id='items' name="day">
<option value="">---SELECT---</option>
</select>
</div>