无法创建动态下拉列表

Question

强文本

我创建带有酒店和房间表的动态下拉列表。当我选择酒店时，该酒店的房间将显示在下拉列表中。

$(document).ready(function() {
$('select[name="hotel"]').on('change', function(){
    var hotelId = $(this).val();
    if(hotelId) {
        $.ajax({
            url: '/room/get/'+hotelId,
            type:"GET",
            dataType:"json",
            beforeSend: function(){
                $('#loader').css("visibility", "visible");
            },

            success:function(data) {

                $('select[name="room"]').empty();

                $.each(data, function(key, value){

                    $('select[name="room"]').append('<option value="'+ key +'">' + value + '</option>');

                });
            },
            complete: function(){
                $('#loader').css("visibility", "hidden");
            }
        });
    } else {
        $('select[name="room"]').empty();
    }

});
});

这是函数index（）。

public function index()
      {
              $hotel = DB::table('hotel')->pluck("name","id");
                           return view('hotel.price_insert',compact('hotel'));
                        }

                public function getStates($id)
                         {
                           $room = DB::table("room")->where("hotel_id",$id)->pluck("room_name","id")->toJson();

                           return json_encode($room);



                        }