取决于使用 JQUERY 的日期字段的下拉菜单答案

【问题标题】：Dropdown menu that depends on the date field using JQUERY取决于使用 JQUERY 的日期字段的下拉菜单
【发布时间】：2022-10-07 15:45:32
【问题描述】：

我正在使用 JQUERY 进行一个项目，但我面临一个困难的情况，我通常知道如何使下拉菜单依赖于另一个，但现在我需要一个包含年龄范围的下拉菜单取决于在出生日期字段中键入的日期，我希望当我在出生日期字段中键入时，下拉菜单应自动选择年龄范围，但如果日期字段为空，则必须选择 \" unspecified\" 选项，其 ID 等于 4 出现在 DATE_RANGE 表中，请帮助我解决这个谜题，欢迎提出任何建议。如果我在提出的问题中犯了错误，请向我解释我该怎么做，任何帮助将不胜感激

这是我的代码

<div class=\"form-group\">
    <input type=\"date\" name=\"bd\" id=\"bd\" value=\"\"  >

    <select class=\"form-control\" name=\"rd\" id=\"rd\">
        <option></option>
        <option value\"1\">CAT_1</option>
        <option value\"2\">CAT_2</option>
    </select>
    
</div>

此致

您的代码不完整年龄范围集合的价值是什么，例如选择框中有多少范围显示 php 端代码
为什么是PHP？当您可以仅使用纯 js 或 jquery 在浏览器客户端处理此问题时
您好，谢谢您的回答，我很感激，我使用的是 PHP 框架，所以我用它来将数据存储到 HUMAIN TABLE 中，并将数据带入下拉菜单，我有四个年龄范围 -18 ，顺便说一句 18 25，顺便说一句 25 50，+50，我通过添加一些解释来编辑问题，再次感谢您的支持
基本上用户将选择出生日期，这意味着将出生日期映射到日期范围的这个特定部分将由 JavaScript 稍后处理，您的 PHP 代码会将所选值存储在数据库中。
是的，就是这样，非常感谢

标签： javascript jquery ajax

【解决方案1】：

以下示例将监听用户选择的出生日期更改的事件，然后将 dob 传递给函数，该函数根据在日期范围选择框中选择适当日期范围的年龄计算年龄。

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>

如果您想更好地控制数据格式并简化计算，您可以使用 moment.js，例如getAge 函数可以更新如下

const getAge = (dob) => {
  const date = moment(dob, 'DD/MM/YYYY');
  return moment().diff(date, 'years');
};

【讨论】：

非常感谢@Zain Ul Abidin 的支持我真的很感激，最后一个问题，如果 Birth_date 字段为空，如何使其显示 val('5') 这意味着未指定
默认情况下，您应该在页面加载时显示 val(5) 不会选择日期，一旦用户设置日期，则至少在此日期控件中无法清除选择，但是对于自定义控件，当用户清除或取消设置日期时在那里设置值 5
非常感谢@Zain Ul Abidin Date(dob))/(31556952000)) 它是用于 mm/dd/yyyy 怎么样 dd/mm/yyyy
然后你可以跳过这个并使用你喜欢的任何格式的时刻库和格式
我编辑了我的答案检查