Question

这就是我想发生的事情 -第一个下拉菜单（父级） -第二个下拉菜单（儿童） -第二个下拉菜单上的选项将取决于第一个下拉菜单的选定值。

我正在使用laravel 5.8。

Answer 1

您认为

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select class="form-control{{ $errors->has('state') ? ' is-invalid' : '' }}" onchange="dropdown(this.value);" name="state" id="state">
   <option>--select state--</option>
   <option value="Kerala">Kerala</option>
   <option value="Karnataka">Karnataka</option>
   <option value="Tamil Nadu">Tamil Nadu</option>
</select> 
<select class="form-control{{ $errors->has('district') ? ' is-invalid' : '' }}" name="district" id="district">
   <option>Please choose state from above dropdown</option>
</select>

<script >
    function dropdown(msg){
        var state=msg;
        $.ajax({
       url: 'getdistrict/'+state,
       type: 'get',
       dataType: 'json',
       success: function(response){
            $("#district").empty(); 

         var len = 0;
         if(response['data'] != null){
           len = response['data'].length;
         }
         if(len > 0){
           // Read data and create <option >
           for(var i=0; i<len; i++){

             var id = response['data'][i].id;
             var name = response['data'][i].name;

             var option = "<option value='"+name+"'>"+name+"</option>"; 

             $("#district").append(option); 
           }
         }

       }
    });
    }

在您的控制器中

public function district($id)
{
    $userData['data'] = DB::table('alldistricts')
    ->where('state', $id)
    ->orderBy('name', 'asc')
    ->get();

 echo json_encode($userData);
 exit;
}

在您的web.php中

Route::get('/getdistrict/{id}','RegistrationController@district')->name('getdistrict');

Answer 2

要实现这一目标，您必须了解前端脚本，例如Vue js或至少是本机javascript。我将展示如何使用vue js和axios包以及本机js和ajax实现此目的。

Vue js和axios：说明文件： 1）https://vuejs.org（适用于vue js） 2）https://www.npmjs.com/package/axios（适用于axios软件包）

将此行包括在标题中。


    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>

注意：我将Vue js cdn用于开发模式。确保实时更改为生产模式。进一步检查文档。

然后以以下形式添加它：

<form method='post' action="http://example.com/location" id="developers">
  <select name="developer_type" v-on:change="getLanguages" v-model="developerType">
    <option disabled> Select Developer Type </option>
    <option value="front"> Front-End Developer </option>
    <option value="back"> Back-End Developer </option>
    <option value="full"> Full Stack Developer </option>
  </select>

  <select name="Coding_language">
    <option disabled v-if="developerType!=null"> Select Developer Type First </option>

    <option disabled v-else="developerType!=null"> Select Coding Language </option>
    <option v-for="lang in codingLaguanges" value="lang"> @{{lang}} </option>
  </select>
</form>

注意：如果仅使用Laravel刀片作为模板引擎，请使用@ {{}}；否则，请仅使用{{}}

然后在页脚脚本中添加

let developerForm = new Vue({
                el:'#developers',
                data:{
                    developerType:null,
                    codingLanguages:null
                },
                methods:{
                    getLanguages: function () {

                        axios
                            .post('/developers/getLanguages',{
                                type: developerForm.developerType
                            })
                            .then(response => (
                                developerForm.codingLanguages = response.data.languages
                            ));

                    }
                }

            });

注意：我在select中使用了v-on：change和v-model，而不是使用watcher ands-model，因为如果您是vue js的新手，此概念会更容易，否则请使用Watcher本身。查看Vue js文档。但是，两者都可以在这种情况下工作。 在.post中为您提供正确的URL以获得结果。

然后定义您的路线

Route::post('/developers/getLanguages', ['as'=>'dev.getLang','uses'=>'web\DevController@getLanguages']);

请注意，这是Laravel部分。您可以在https://laravel.com

中查看文档

然后在DevController中添加此方法


public function getLanguages(Request $request){

  //do something to fetch result from db. Let us consider user has selected backend as developer type and there is array named Languages and it contains elements named php, python and java. i.e. $languages = ['php','python','java'].

    return response()->Json(['languages'=>$languages],200);


}

注意：这将是Controller用来了解上一注释中提到的有关控制器检查laravel文档的详细信息的方法。在这里，您还可以从db检索变量值。但我仅使用样本值。作为回报，我在json中使用了数组，因为您不能在该数组中使用多个变量（例如，将来可以使用statusCode来标识错误）。然后，确保检索时json数组中的键名称与axios中的对象名称相同。我使用状态代码为200，因为浏览器对请求的响应成功。如果您使用400浏览器，则请求的响应错误。

这是您可以实现的最简单的方法。

您还可以使用jquery ajax和jquery或本机javascript和javascript ajax实现此目的。但是它有一些复杂性和局限性。

如果您需要本机js或jQuery的代码，请对其进行注释，然后将其发布

Laravel 5.8中的动态下拉列表

2 个答案: