Laravel中下拉菜单触发AJAX无响应问题排查求助

我是编程新手，正在学习Laravel开发家庭项目，希望根据下拉菜单的选择从数据库获取数据。已编写下拉菜单HTML代码及AJAX触发脚本，但点击下拉选项时alert无响应，请帮忙排查代码错误。

原HTML代码 #

<div class="dropdown">
            <button class="btn p-0" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              <i class="bx bx-dots-vertical-rounded"></i>
            </button>
            <div id="milkstatementdropdown" name="milkstatementdropdown"class="dropdown-menu dropdown-menu- end" aria-labelledby="milkstatementdropdown">
              <li><a class="dropdown-item" href="javascript:void(0);">Yesterday</a></li>
              <li><a class="dropdown-item" href="javascript:void(0);">Last 7 Days</a></li>
              <li><a class="dropdown-item" href="javascript:void(0);">Last Month</a></li>
              <li><a class="dropdown-item" href="javascript:void(0);">Last 3 Month</a></li>
              <li><a class="dropdown-item" href="javascript:void(0);">Last 6 Month</a></li>
            </div>
          </div>

原JS脚本 #

$("#milkstatementdropdown").change(function(){
                  var duration = $(this).val();
                  alert(course);
                  // ajax call
                });

错误分析 #

• 事件类型错误：change事件仅适用于<select>这类表单控件，你绑定的是Bootstrap下拉菜单的容器<div>，这个元素不会触发change事件，应该监听下拉项的click事件。
• 变量名错误：JS中定义了duration变量，但alert的是未定义的course，即使事件触发也会报错。
• HTML语法错误：下拉容器的类名dropdown-menu- end多了一个空格，正确应为dropdown-menu-end，虽不影响事件触发，但会导致样式异常。

修正后的代码 #

修正后的HTML #

<div class="dropdown">
    <button class="btn p-0" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <i class="bx bx-dots-vertical-rounded"></i>
    </button>
    <div id="milkstatementdropdown" name="milkstatementdropdown" class="dropdown-menu dropdown-menu-end" aria-labelledby="milkstatementdropdown">
        <li><a class="dropdown-item" href="javascript:void(0);">Yesterday</a></li>
        <li><a class="dropdown-item" href="javascript:void(0);">Last 7 Days</a></li>
        <li><a class="dropdown-item" href="javascript:void(0);">Last Month</a></li>
        <li><a class="dropdown-item" href="javascript:void(0);">Last 3 Month</a></li>
        <li><a class="dropdown-item" href="javascript:void(0);">Last 6 Month</a></li>
    </div>
</div>

修正后的JS脚本 #

// 监听下拉项的点击事件
$("#milkstatementdropdown .dropdown-item").click(function(){
    var duration = $(this).text(); // 获取选中的下拉项文本
    alert(duration); // 修正变量名，与定义一致
    
    // Laravel AJAX请求示例（需替换为你的实际路由）
    /*
    $.ajax({
        url: '/fetch-milk-data', // 你的Laravel路由地址
        method: 'POST',
        data: {
            duration: duration,
            _token: '{{ csrf_token() }}' // Laravel必须的CSRF令牌
        },
        success: function(response){
            // 处理从数据库返回的数据
            console.log(response);
        },
        error: function(xhr){
            console.error('请求失败:', xhr.responseText);
        }
    });
    */
});

额外说明 #

如果需要传递标准化的参数值（而非文本），可以给每个下拉项添加自定义data属性：

<li><a class="dropdown-item" href="javascript:void(0);" data-duration="yesterday">Yesterday</a></li>

然后在JS中通过$(this).data('duration')获取对应的值。

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