取決於使用 JQUERY-AJAX 的日期字段的下拉菜單

Question

我正在使用 PHP 框架和 AJAX -JQUERY 開發一個項目，但我面臨一個困難的情況，我通常知道如何使下拉菜單依賴於另一個，但現在我需要一個包含年齡范圍的下拉菜單這取決於在出生日期字段中鍵入的日期，我希望當我在出生日期字段中鍵入時，下拉菜單應自動 select 年齡范圍，但如果日期字段為空，則必須 select 為“未指定”選項，其 ID 等於 4，出現在 DATE_RANGE 表中，請幫助我解決這個謎題，歡迎提出任何建議。 如果我在提出的問題中犯了錯誤，請向我解釋我該怎么做，任何幫助將不勝感激

//更多細節：

我有一個名為 Human 的表，其中包含 (ID, FULL_NAME, BIRTH_DATE, AGE_RANGE_ID)，還有一個名為 AGERANGE 的表，它又包含 (ID, RANGE_NAME)，它帶回了存儲在 AGERANGE 表中的年齡范圍表中的年齡組：

|ID     |  RANGE_NAME
-------------------------
|   1   |   - 18        |
|   2   |   btw 18 25   |
|   3   |   btw 25 50   |
|   4   |   + 50        |
|   5   |   unspecified |

這是我的代碼

<div class="form-group">

    <label for="birth-date" >BIRTH DATE</label>
    <input type="text"  class="datepicker" name="birth-date" id="birth-date" value="<?php echo set_value('BIRTH_DATE', $row->BIRTH_DATE); ?>"  >

    <label for="date_range" >AGE RANGE</label>
    <select class="form-control" name="date_range" id="date_range">
        <option></option>
        <?php
        foreach ($date_ranges as $row) {
        echo '<option value="' . $row->CODE . '"' . set_select('DATE_RANGE', $row->CODE, $row->CODE === $row->TYPE_REPRESENTANT_CODE) . '>' . $row->RANGE_NAME. '</option>';
        }
        ?>
    </select>
    
</div>

$('.datepicker').datepicker({
                autoclose: true,
                format: 'dd/mm/yyyy',
                language: 'fr'
            });

此致

Answer 1

以下示例將監聽用戶選擇的出生日期更改的事件，然后將 dob 傳遞給 function，該 function 根據在日期范圍 select 框中選擇適當日期范圍的年齡計算年齡。

 const getAge = (dob) => { return ~~((new Date()-new Date(dob))/(31556952000)); }; $('#birth-date').change(function() { const date = $(this).val(); const age = getAge(date); if(age < 18) $('#date_range').val(1).change(); else if(age >= 18 && age < 25) $('#date_range').val(2).change(); else if(age >= 25 && age < 50) $('#date_range').val(3).change(); else $('#date_range').val(4).change(); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="form-group"> <label for="birth-date" >BIRTH DATE</label> <input type="date" class="datepicker" name="birth-date" id="birth-date" > <br /> <label for="date_range" >AGE RANGE</label> <select class="form-control" name="date_range" id="date_range"> <option></option> <option value="1">- 18</option> <option value="2">btw 18 25</option> <option value="3">btw 25 50</option> <option value="4">50+</option> </select> </div>