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>  

CodePudding user response：

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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>