首页写有关年月日基于AJAX实现级联下拉菜单（至少3级）html网页代码

写有关年月日基于AJAX实现级联下拉菜单（至少3级）html网页代码

时间: 2024-01-16 12:05:38 浏览: 85

很高兴您问到这个问题。以下是一个基于AJAX实现级联下拉菜单的HTML网页代码示例，包含3级下拉菜单： ``` <!DOCTYPE html> <html> <head> <title>级联下拉菜单</title> <meta charset="UTF-8"> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("#year").change(function(){ var year_id = $(this).val(); $.ajax({ url: "get_month.php", type: "POST", data: {year_id: year_id}, dataType: "html", success: function(data){ $("#month").html(data); $("#day").html("<option>请选择</option>"); } }); }); $("#month").change(function(){ var month_id = $(this).val(); $.ajax({ url: "get_day.php", type: "POST", data: {month_id: month_id}, dataType: "html", success: function(data){ $("#day").html(data); } }); }); }); </script> </head> <body> <label>年份：</label> <select id="year"> <option value="">请选择</option> <option value="2021">2021年</option> <option value="2022">2022年</option> </select> <br><br> <label>月份：</label> <select id="month"> <option value="">请选择</option> </select> <br><br> <label>日期：</label> <select id="day"> <option value="">请选择</option> </select> </body> </html> ``` 请注意，此代码仅包含 HTML 和 JavaScript 部分，其中通过 AJAX 技术，利用 jQuery 库实现了级联下拉菜单的动态更新。具体的后台 PHP 代码需要根据具体需求编写。在上述 HTML 代码中，我们通过 `id` 属性对每个下拉菜单进行了标识，然后使用 jQuery 的 `change()` 方法监听 `year` 和 `month` 下拉菜单的变化，并在发生变化时发送 AJAX 请求，获取后台数据，动态更新 `month` 和 `day` 下拉菜单的选项。

阅读全文