Php Laravel 5.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>

获取错误：未定义变量：扇区

---

我希望这是您的要求：

<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>

@foreach（$sectors10作为$sector）
{{$sector->SectorName}
@endforeach
@foreach（$sectors10作为$sector）
{{$sector->SectorName}
@endforeach

添加脚本以使其工作：

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

函数getSelectorValue（selectorObj，selector）{
document.querySelector（selector）.value=selectorObj.value；
}

我希望这是您的要求：

<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>

@foreach（$sectors10作为$sector）
{{$sector->SectorName}
@endforeach
@foreach（$sectors10作为$sector）
{{$sector->SectorName}
@endforeach

添加脚本以使其工作：

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

函数getSelectorValue（selectorObj，selector）{
document.querySelector（selector）.value=selectorObj.value；
}

好的，我使用javascript和带有json数据类型的ajax函数实现了这一点。我是JavaScript新手，花了我一段时间，所以我花时间为新来者发布详细信息。我们开始：

查看文件： 诀窍是使用html隐藏对象捕获route+前缀，如下拉列表前的这一行：

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

我们正在创建一个带有{id}参数的路由。这将是下拉列表#1中的选定值。然后我们在Sectorscontroller中调用“selectsubsector”方法

控制器： 第一个下拉查询：

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

第二个下拉查询（selectsubsector方法）：

查看文件的最后一部分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>

$（'#sectorSelect'）.change（function（）{//当选择下拉列表#1中的任何值时，我们观察并执行下一行
var id=$（this）.val（）；//我们在下拉列表#1中获取所选值，并将其存储在id变量中
var url=$（'#application_url'）.val（）；//我们从视图文件第一行中使用的隐藏元素中获取url，并将其存储在url变量中
//下面是ajax功能部分
$.ajax({
url:url+“/kitysoftware/sectors/subsectors/”+id，//我们使用的url与路由文件中使用的url相同，我们正在添加id变量，该变量在下拉列表#1中具有选定的值
dataType:“json”//我们指定要使用json类型的数据。这就是我们发送查询结果的地方（从控制器）
success:function（data）{//*根据我的理解，使用json数据类型意味着变量“data”获取值，这就是为什么我们使用它来告诉我们从这里开始要做什么*
//最后一部分是我们使用下拉列表#1的值，我们设置下拉列表#2的值，只需添加通过“data”变量从查询（在controllert中）获得的变量。
$（'#subSectorSelect'）.empty（）；
$。每个（数据、函数（键、值）{
$（“#subsectorname”）.append（“”+value.SectorName+“”）；
});
}
});
});

---

希望对解决方案和解释有所帮助。我也很高兴得到一些反馈

好的，我使用javascript和带有json数据类型的ajax函数成功地做到了这一点。我是JavaScript新手，花了我一段时间，所以我花时间为新来者发布详细信息。我们开始：

查看文件： 诀窍是使用html隐藏对象捕获route+前缀，如下拉列表前的这一行：

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

我们正在创建一个带有{id}参数的路由。这将是下拉列表#1中的选定值。然后我们在Sectorscontroller中调用“selectsubsector”方法

控制器： 第一个下拉查询：

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

第二个下拉查询（selectsubsector方法）：

查看文件的最后一部分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>

$（'#sectorSelect'）.change（function（）{//当选择下拉列表#1中的任何值时，我们观察并执行下一行
var id=$（this）.val（）；//我们在下拉列表#1中获取所选值，并将其存储在id变量中
var url=$（'#application_url'）.val（）；//我们从视图文件第一行中使用的隐藏元素中获取url，并将其存储在url变量中
//下面是ajax功能部分
$.ajax({
url:url+“/kitysoftware/sectors/subsectors/”+id，//我们使用的url与路由文件中使用的url相同，我们正在添加id变量，该变量在下拉列表#1中具有选定的值
dataType:“json”//我们指定要使用json类型的数据。这就是我们发送查询结果的地方（从控制器）
success:function（data）{//*根据我的理解，使用json数据类型意味着变量“data”获取值，这就是为什么我们使用它来告诉我们从这里开始要做什么*
//最后一部分是我们使用下拉列表#1的值，我们设置下拉列表#2的值，只需添加通过“data”变量从查询（在controllert中）获得的变量。
$（'#subSectorSelect'）.empty（）；
$。每个（数据、函数（键、值）{
$（“#子部门选择”）。
        public function selectsector() 
        { 
         $sectors = Sector::get();
         return view('besttradesview', compact('sectors'));
        } 
        
    public function selectsubsector($sectors)
        {
          $subsectors = Sectors::where('parentid', $sectors)->get(); 
        if (empty($subsectors)) {
            $html = '';
            $html = '<option value="">There has no Value</option>';
        } else {
            $html = '';
            foreach ($subsectors as $subsector) {
                $html .= '<option value="'.$subsector->id.'">'.$subsector->subsector.'</option>';
            }
        }
        return response()->json(['html' => $html]);       
        }

Route::get('/get-selector/{id}', 'Inventory\selectorController@selectsubsector')->name('get.selector');

$(document).on('change','.selectsector',function () { 
        var id= $(this).val();
        var url = "{{ URL::to('/get-selector') }}"+ '/' + id;
        $.ajax({
                url: url,
                type: 'get',
                dataType:'JSON',
                success: function (response) {
                    console.log(response);
                    if(response.html==''){
                        $('.selectsubsector').html('<option value="">There has no Value</option>');
                    }else{
                        $('.selectsubsector').html(response.html);
                    }   
                },error: function (exception) {
                    console.log(exception);
                }
            });
        });