Laravel Ajax下拉框未返回选中值ID，传酒店ID获取房间报错

看起来你现在卡两个问题上了：一是传酒店ID拿房间的Ajax请求报错，二是下拉框死活拿不到选中的ID。我来帮你逐个捋顺修复：

一、先搞定Ajax获取酒店房间的报错问题 #

你的代码里有几个关键小错误，先逐个修正：

1. 路由定义没加参数 #

你现在的路由是Route::get('/rooms', 'HomeController@rooms')->name('/rooms');，但要接收酒店ID的话，得改成带参数的路由：

Route::get('/rooms/{id}', 'HomeController@rooms')->name('rooms');

这样URL才能匹配/rooms/123这种带ID的格式，不然请求会直接404。

2. 控制器参数写法错了 #

控制器里的public function rooms(id $id)是语法错误，id不是合法的类型提示，改成下面这样就行：

public function rooms($id){
    // 如果需要强制ID是整数，可以写成 int $id
    $response = ['hotel_plan_id' => $id];
    return response()->json($response);
}

另外直接返回$id不够规范，包装成数组或对象返回，JSON格式会更标准。

3. Ajax请求的URL和数据格式不对 #

你的JS里url: '/rooms'+id会生成/rooms123这种错误URL，得改成/rooms/+id；而且data用字符串拼接容易出语法问题，换成对象格式更稳妥：

function showRooms(hotel_plan_id) {
    var id = hotel_plan_id;
    if (id !== "") {
        var token = $('meta[name="_token"]').attr('content');
        $.ajax({
            url: '/rooms/' + id, // 修正URL拼接方式
            type: "GET",
            dataType: 'JSON',
            data: { 
                _token: token 
                // ID已经通过URL传了，这里不用再重复传，除非你控制器要从请求参数拿
            },
            success:function(data) {
                console.log('返回数据:', data); // 用console.log比alert更方便调试
                // 这里可以写填充房间下拉框的逻辑，比如：
                // $('#roomSelect').empty();
                // data.forEach(room => {
                //     $('#roomSelect').append(`<option value="${room.id}">${room.name}</option>`);
                // });
            },
            error: function (xhr) {
                console.error('请求错误详情:', xhr.responseText); // 打印错误信息，方便排查
                alert("获取房间列表失败，可查看控制台详情");
            }
        });
    }
}

二、修复下拉框拿不到选中值ID的问题 #

一般这种情况都是事件绑定或取值方式不对，假设你的酒店下拉框是这样的：

<select id="hotelPlanSelect">
    <option value="">请选择酒店方案</option>
    <option value="1">酒店方案A</option>
    <option value="2">酒店方案B</option>
</select>

你需要给下拉框绑定change事件，用正确的方式拿选中值：

$('#hotelPlanSelect').on('change', function() {
    var selectedId = $(this).val(); // 这里就是选中的ID
    if(selectedId) {
        showRooms(selectedId); // 调用上面的获取房间函数
    } else {
        // 没选中的话可以清空房间下拉框
        $('#roomSelect').empty().append('<option value="">请先选择酒店方案</option>');
    }
});

重点要确认：下拉框的option标签里，value属性确实设置成了对应的ID，而不是其他内容；另外用$(this).val()是最稳妥的取值方式。

额外调试小技巧 #

• 按F12打开浏览器开发者工具，看Network标签，能看到Ajax请求的URL对不对、响应内容和状态码是什么，一眼就能定位问题。
• 控制器里可以先加个dd($id)，确认有没有接收到正确的ID。

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