Результаты выпадающего списка, основанные на выборе из предыдущего выпадающего списка

Question

Мне нужна помощь, чтобы получить больше значений в этом раскрывающемся фильтре. У меня есть 3 выпадающих списка, первый даст мне все «компании», второй покажет все «блоки» этой компании, а последний даст мне все комнаты этого блока.

Итак, мне нужно показать 3 значения в последнем выпадающем меню («id», «sala», «name»). Как мне это сделать?

Вот как мне получить значения для заполнения последнего выпадающего списка:

public function getAmbienteRev(Request $request)
{
        $ambientes = DB::table("ambientes")
            ->where("bloco_id",$request->bloco_id)
            ->orderByRaw("sala", "asc")
            ->pluck('sala', 'id');
        return response()->json($ambientes);
}

и вот код, который фильтрует значения:

$('#unidade').change(function() {
   var unidadeID = $(this).val();
   if (unidadeID) {
       $.ajax({
           type: "GET",
           url: "{{url('get-bloco-rev')}}?unidade_id=" + unidadeID,
           success: function(res) {
               if (res) {
                   $("#bloco").empty();
                   $("#bloco").append('<option>Selecione o Bloco</option>');
                   $.each(res, function(key, value) {
                       $("#bloco").append('<option value="' + key + '">' + value + '</option>');
                   });

               } else {
                   $("#bloco").empty();
               }
           }
       });
   } else {
       $("#bloco").empty();
       $("#ambiente").empty();
   }
});
$('#bloco').on('change', function() {
   var blocoID = $(this).val();
   if (blocoID) {
       $.ajax({
           type: "GET",
           url: "{{url('get-ambiente-rev')}}?bloco_id=" + blocoID,
           success: function(res) {
               if (res) {
                   $("#ambiente").empty();
                   $("#ambiente").append('<option>Selecione a Sala</option>');
                   $.each(res, function(key, value) {
                       $("#ambiente").append('<option value="' + key + '">' + value + '</option>');
                   });

               } else {
                   $("#ambiente").empty();
               }
           }
       });
   } else {
       $("#ambiente").empty();
   }

 });

Мне нужно что-то вроде этого:

    $.each(res, function(key, value, name) {
                   $("#ambiente").append('<option value="' + key + '">' + value + ' - ' + name +'</option>');
               });

Я делаю эти изменения:

 ->pluck('name','sala', 'id')

и скрипт к

$.each(res, function(key, value1, value2) {
                    console.log(res);
                       $("#ambiente").append('<option value="' + key + '">' + value1 + ' - ' + value2 + '</option>');
                   });

console.log (Рез)

 {101: "Sala de Aula", 102: "Sala de Aula", 103: "Lab de Criatividade e Inovaçăo", 105: "Atelier de Moda 2", 106: "Sala de Desenho 1", 107: "Sala de Aula", 109: "Sala de Aula", 110: "Sala de Aula", 113: "Sala de Aula", 114: "Atelier de Projeto 2 Design", 115: "Atelier de Projeto 3 Design", 116: "Atelier de Projeto 4 Design", 117: "Atelier de Projeto 5 Design", 118: "Atelier de Projeto 6 Design", 201: "Laboratorio de Simulaçăo e Projetos 1", 202: "Laboratório de Simulaçăo e Projetos 2", 203: "Laboratorio de Telecomunicaçőes", 204: "Laboratorio de Eletronica de Potencia", 206: "Sala de Aula", 207: "Laboratório de Eletrônica", 209: "Laboratório de Eletrônica", 210: "Sala de Aula", 213: "Espaço Fotográfico lab.fotogafico", 214: "Sala de Aula", 215: "Sala de Aula", 216: "Sala de Aula", 218: "Sala de Aula", 219: "Sala de Aula", 220: "Sala de Aula", 221: "Sala de Aula", 001: "Laboratório de Computaçăo 01", 002: "Laboratorio de Computaçăo 02", 002A: "Lab. de Informática 7", 002B: "Lab. de Informática 8", 002C: "Lab. de  Informatica 9", …}

Но в выпадающем меню отображается

<option value="101">Sala de Aula - undefined</option>