Laravel 5.6: получить выбранное значение из раскрывающегося списка, чтобы использовать его в другом

Question

6, я использую раскрывающийся список для чтения столбца из таблицы базы данных.Все, что я хочу, это получить выбранное значение в этом раскрывающемся списке и использовать его для создания нового запроса, который будет заполнен в новом раскрывающемся списке.

После прочтения и просмотра нескольких примеров я вижу людей, использующих ajax и другие.люди, использующие laravel HTTP-запрос, например $request->get(), поэтому я не знаю, какой путь предпринять, поскольку я не знаком ни с одним из них, и даже при попытке несколько раз не могу заставить его работать.

МожетКто-нибудь подскажет мне лучший / эффективный способ сделать это?Можно ли сделать это только с помощью php или какой-то функции в laravel, которую мне не хватает?

Вот мой контроллер:

public function selectsector() //this is the dropdown #1 that works fine
{ 
 $sectors = DB::table('Sectors')->whereBetween('SectorID', [1, 10])->value('SectorID');
 return view('besttradesview', ['sectors10' => $sectors]);
} 

public function selectsubsector() //dropdown #2 not working
{
$subsectors = DB::table('Sectors')->where('parentid', $sectors)->get(); 
//this line is not working it does not recognize $sector variable
return view('besttradesview', ['subsectors42' => $subsectors]);
}

Просмотр с dropdow # 1: сектор и # 2: подсектор

<form method="GET">
<div class="selectsector">
<Select class="selectsector" name = "sector">
@foreach($sectors10 as $sector) 
<option>{{ $sector->SectorName }}</option>
@endforeach
</select>

<Select class="selectsubsector" name = "subsector">
@foreach($subsectors42 as $subsector) 
<option>{{ $subsector->SectorName }}</option>
@endforeach
</select>
</form>

Маршруты:

Route::get('kitysoftware/besttrades', 'SectorsController@selectsector');
Route::get('kitysoftware/besttrades', 'SectorsController@selectsubsector');

Ошибка получения: неопределенная переменная: сектора

Answer 1

Хорошо, мне удалось сделать это с помощью функции javascript и ajax с типом данных json.Я новичок в JavaScript, и это заняло у меня некоторое время, поэтому я не тороплюсь, чтобы опубликовать детали для новичков.Здесь мы идем:

Файл просмотра: Хитрость заключается в использовании скрытого html-объекта, который захватывает маршрут + префикс, как в этой строке перед выпадающими списками:

 <input type="hidden" name="application_url" id="application_url" value="{{URL::to(Request::route()->getPrefix()) }}"/>

Имя этого объекта - "application_url", которое мы будем использовать позже в коде javascript для завершения URL-адреса, необходимого для маршрутов.
DropDown # 1 с именем "sectorSelect":

<label class="selectsector">Sector:</label>
<Select class="selectsector" id="sectorSelect" name="sectorSelect" >
    <option value=""> -- Please select sector --</option>
    @foreach ($sectors10 as $sector)
        <option value="{{ $sector->SectorID }}">{{ $sector->SectorName }}</option>
    @endforeach
</select>

DropDown # 2 с именем: "SubsectorSelect"

 <label class="selectsector">SubSector:</label>
 <Select class="selectsector" id="subSectorSelect" name="subSectorSelect">
    <option value=""> -- Select an option --</option> // you don't have to do nothing here since this will be populated it from a query depending on the dropdown#1 selected value
 </select>

Теперь в файле маршрутов web.php:

Route::get('kitysoftware/sectors/subsectors/{id}', 'SectorsController@selectsubsector');

Мы создаем маршрут спараметр {id}.Это будет выбранное значение в раскрывающемся списке # 1.Затем мы вызываем метод "selectsubsector" в Sectorscontroller.

Контроллер: Первый выпадающий запрос:

public function selectsector()
{
$sectors = DB::table('Sectors')->select('SectorName', 'SectorID')- 
 >whereBetween('SectorID', [1, 10])->get();
    return view('besttradesview', ['sectors10' => $sectors]);

Второй выпадающий запрос (метод selectsubsector):

   public function selectsubsector($sectorId)
    {

    $subsectors = DB::table('Sectors')->select('SectorName', 'SectorID')->where('parentid', $sectorId)->get();
    return response()->json($subsectors); //this line it's important since we are sending a json data variable that we are gonna use again in the last part of the view.
    }

Заключительная часть файла представления Функция javaScript + ajax

<script type="text/javascript">
    $('#sectorSelect').change(function () { //we watch and execute the next lines when any value from the dropdown#1 is selected
        var id = $(this).val(); //we get the selected value on dropdown#1 and store it on id variable
        var url = $('#application_url').val(); //we get the url from our hidden element that we used in first line of our view file, and store it on url variable
            //here comes the ajax function part
            $.ajax({
            url: url + "/kitysoftware/sectors/subsectors/" + id, //we use the same url we used in our route file and we are adding the id variable which have the selected value in dropdown#1
            dataType: "json", //we specify that we are going to use json type of data. That's where we sent our query result (from our controller)
            success: function (data) { //*on my understanding using json datatype means that the variable "data" gets the value and that's why we use it to tell what to do since here.*
                //and this final part is where we use the dropdown#1 value and we set the values for the dropdown#2 just adding the variables that we got from our query (in controllert) through "data" variable.
                $('#subSectorSelect').empty();
                $.each(data, function (key, value) {
                    $('#subSectorSelect').append('<option value="' + key.SectorID + '">' + value.SectorName + '</option>');
                });
            }
        });
    });
</script>

Надеюсь, это поможет решению и объяснениям.Я тоже рад получить обратную связь.

Answer 2

Я надеюсь, что это ваше требование:

<Select class="selectsector" onChange="getSelectorValue( this, '#selector2' )" id="selector1" name="sector">
    @foreach($sectors10 as $sector)
    <option>{{ $sector->SectorName }}</option>
    @endforeach
</select>

<Select class="selectsubsector" onChange="getSelectorValue( this, '#selector1' )" name = "subsector" id="selector2" >
    @foreach($sectors10 as $sector)
    <option>{{ $sector->SectorName }}</option>
    @endforeach
</select>

Добавьте скрипт, чтобы он заработал:

<script type="text/javascript">
    function getSelectorValue( selectorObj, selector ){
        document.querySelector( selector ).value = selectorObj.value;
    }
</script>