Динамический выпадающий в Laravel 5.8

Question

вот что я хочу, чтобы это произошло - Первый раскрывающийся список (Родитель) - Второй раскрывающийся список (Дочерний) - Параметры второго раскрывающегося списка будут зависеть от выбранного значения первого раскрывающегося списка.

Я использую laravel 5.8.

Answer 1

Чтобы достичь этого, вы должны знать интерфейсный скрипт, такой как Vue js или хотя бы нативный javascript. Я покажу, как этого добиться, используя пакет vue js and axios и нативные js и ajax.

Vue js and 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
                            ));

                    }
                }

            });

Примечание: я использовал v-on: change и v-model в select вместо использования 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);


}

Примечание: это будет ваш метод для Контроллера, чтобы узнать детально о документации проверки контроллера, упомянутой в предыдущем примечании. Здесь вы также можете получить значение переменной из db. но я использовал только выборочные значения. В свою очередь, я использовал массив в json, потому что вы можете использовать n переменных в этом массиве (например, вы можете использовать statusCode для определения вашей ошибки в будущем и многое другое.). Затем убедитесь, что имя ключа в массиве json и имя объекта в axios при получении совпадают. И я использовал код состояния как 200, потому что браузер отвечает на запрос успешно. если вы используете браузер 400, ответом на запрос будет ошибка.

Это самый простой способ, который вы можете достичь.

Вы также можете использовать jquery ajax и jquery или нативный javascript и javascript ajax для достижения этой цели. Но это имеет некоторую сложность и ограничение.

Если вам нужен код для нативного js или jQuery, прокомментируйте его, и я опубликую его

Answer 2

На Ваш взгляд

<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');