Установить выпадающий список в поле выбора на основе выбора раньше на laravel

Question

Привет, знаю, как это сделать в js/jquery, но я хотел бы понять, если есть простой и быстрый способ с помощью https://laravelcollective.com/docs/5.0/html

Мне нужно установить значения второго выбора на основе первого выбора, поле 2 относится к связанной модели, поэтому, если я выберу значение из первого выбора, во втором диапазоне будут записаны только те записи, которые связаны с первым значением.

 <div class="form-group col-md-12">
                     <div class="form-group col-md-6">
                        <label for="Corso">Corso di Laurea</label>
                        {{ Form::select('degreeCourses_id', $degreeCourses, null, array('class' => 'form-control')) }}
                    </div>
                    <div class="form-group col-md-6">
                        <label for="ruolo">Percorso di Laurea</label>
                        {{ Form::select('paths_id', $paths, null, array('class' => 'form-control')) }}
                    </div>
                </div>

Answer 1

У меня есть код для выпадающего списка категорий и подкатегорий. При выборе категории выбранная категория отображает подкатегорию в другом раскрывающемся списке с помощью category_id. Здесь я делюсь кодом и надеюсь, что в соответствии с приведенным ниже кодом вы легко решите свою проблему.

$(document).ready(function() {
    $('select[name="category"]').on('change', function() {
        var categoryID = $(this).val();
        if(categoryID) {
            $.ajax({
                url: "{{ url('/product/subcategory') }}/"+categoryID,
                type: "GET",
                dataType: "json",
                success:function(data) {

                    if(data == "error"){
                        $('select[name="subcategory"]').html('<option value="">Selected Category has No SubCategories</option>').attr("disabled",true);
                    }
                    else{
                        $('select[name="subcategory"]').html('<option value="">Select Sub Category</option>').attr("disabled",false);;
                        $.each(data, function(key, value) {
                            $('select[name="subcategory"]').append('<option value="'+ value.id +'">'+ value.sub_category +'</option>');
                        });
                    }
                }
            });
        }else{
            $('select[name="subcategory"]').html('<option value="">First Select Category</option>').attr("disabled",true);
        }
    });
});

И это HTML- код:

<div class="col-lg-3" style="margin-left:15px">
            <fieldset class="form-group">
                <label class="form-label semibold" for="title">Select Category</label>
                <select name="category" id="category" class="form-control">
                  <option value="" selected="" disabled="">Select Category</option>

                  <?php foreach ($Category as $key) { ?>
                    <option value="<?php echo $key->id; ?>" > <?php echo $key->category; ?> </option>
                  <?php } ?>

                </select>
                <span class='error'><?php echo form_error('category'); ?></span>
            </fieldset>
          </div>

          <div class="col-lg-3" style="margin-left:15px">
            <fieldset class="form-group" id="sub" disabled="">
                <label class="form-label semibold" for="title">Select Sub Category</label>
                <select name="subcategory" id="subcategory" class="form-control">
                  <option value="" disabled="">First Select Category</option>

                </select>
                <span class='error'><?php echo form_error('subcategory'); ?></span>
            </fieldset>
          </div>

Я надеюсь, что это будет полезно.

Answer 2

Я сделал некоторые изменения в вашем коде, чтобы он соответствовал моим потребностям: - категория - это мой "дипломный курс"; - подкатегория в этом случае представлена ​​"путями" - мне не нужен вызов "ajax", потому что я все еще на странице!

HTML:

  <div class="form-group col-md-12">
                         <div class="form-group col-md-6">
                            <label for="Corso">Corso di Laurea</label>
                            {{ Form::select('degreeCourses_id', $degreeCourses, null, array('id'=>'degreeCourses_id','class' => 'form-control')) }}
                        </div>
                        <div id="sub_cat" class="form-group col-md-6" >
                            <label for="ruolo">Percorso di Laurea</label>
                            <select name="paths_id" id="paths_id" class="form-control">
                                <option value="" disabled="">First Select Category</option>
                            </select>
                        </div>
                    </div>

и JS ispired вашим предложением:

$ (документ).ready(function(e) {

        $('#degrees').DataTable();
        var deegreeCourses= {!! $paths !!};
        //var $optgroups = $('#subcategory > optgroup');

            $("#degreeCourses_id").on("change",function(){
                var selectedVal = this.value;
                var newSelection= new Array();
                deegreeCourses.forEach(function(entry) {
                    if(entry.degreeCourses_id==selectedVal){
                        newSelection.push(entry);
                    }

                    if(newSelection.length==0){
                        $('select[name="paths_id"]').html('<option value="">Percorsi di laurea assenti</option>').attr("disabled",false);;

                    }

                    $('select[name="paths_id"]').html('<option value="">Seleziona un percorso di laurea</option>').attr("disabled",false);;
                    $.each(newSelection, function(key, value) {
                        $('select[name="paths_id"]').append('<option value="'+ value.id +'">'+ value.nome +'</option>');
                    });




                });

            });

    });

Это: var deegreeCourses= {!! $paths !!}; работает, потому что я на странице шаблона laravel / blade.

Что не работает, эта часть:

  if(newSelection.length==0){
                                $('select[name="paths_id"]').html('<option value="">no Paths</option>').attr("disabled",false);;

                        }

То есть: если нет подкатегории, в зависимости от выбора ° degCourse сделайте второй выбор с опцией "без данных".