Ajax请求成功后根据下拉选项更新文本内容的实现求助

核心问题修正点 #

你的代码存在几个关键问题：

• 错误定位#filter元素的子节点（该元素下并无label）
• 未正确获取下拉选项的时段描述文本
• getElementById调用语法错误

具体修改方案 #

1. 获取时段描述文本
   下拉选项的文本本身就是所需的时段说明（如"Last 7 Days"），可直接从点击的<a>元素中获取，无需依赖后端返回。

2. 正确更新#filter内容
   #filter是<small>元素，直接修改它的文本内容即可，保留原有前缀"For : "，替换掉原有的{{$yesterday}}部分。

3. 修复Ajax代码错误
   修正getElementById调用语法，同时添加阻止默认跳转的逻辑，避免页面滚动。

修改后的完整代码 #

HTML部分（无需改动）

<div class="card-title mb-0">
    <h5 class="card-title m-0 me-2">Milk Sell Statistics</h5>
    <small id="filter" class="text-muted">For : &nbsp;{{$yesterday}}</small>
</div>

<div class="dropdown">
   <button class="btn btn-sm btn-outline-primary dropdown-toggle" type="button" 
                  id="growthReportId" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Yesterday
   </button>
   <div id="milkstatementdropdown" name="milkstatementdropdown" class="dropdown-menu dropdown-menu-end" aria-labelledby="milkstatementdropdown">
       <li><a class="dropdown-item" href="#Yesterday" id={{$yesterdaydate}} data-order="a">Yesterday</a></li>
       <li><a class="dropdown-item" href="#Last7Days" id={{$last7daysdate}}>Last 7 Days</a></li>
       <li><a class="dropdown-item" href="#currentmonth" id={{$currentmonthstartdate}}>Current Month</a></li>
   </div>
 </div>

修改后的Ajax代码

$(function($) {
    $('.dropdown li a').click(function(e) {
        e.preventDefault(); // 阻止a标签默认锚点跳转
        var element = $(this);
        var selectedperiod = element.attr("id");
        var periodText = element.text(); // 获取选中的时段描述

        $.ajaxSetup({
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')} 
        });

        $.ajax({
            type: 'post',
            url: '/milksalereportchangevalues',
            data: {
                inputdate : selectedperiod,
            },
            success: function(data) {
                // 更新filter文本为前缀+选中时段
                $('#filter').text('For :  ' + periodText);
                
                // 如果要显示后端返回的日期范围，可替换为：
                // $('#filter').text(`For :  ${data[0]} - ${data[1]}`);
            }
        });
    });
});

补充说明 #

• 若需要展示后端返回的具体日期区间（比如2022-12-19至2022-12-25），取消注释success回调里的第二行代码即可。
• 添加e.preventDefault()避免点击下拉选项时页面跳转到锚点位置。

内容的提问来源于stack exchange，提问作者Rahul W