Как создать выпадающий

Question

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

Вот что я сделал:

Javascript:

$(document).ready(function () {
    $(document).on('change', '#province_name', function() {
        var province_id = $(this).val();
        var div = $(this).parent();
        var op = " ";
        $.ajax({
            type: 'get',
            url: '{!!URL::to('admin/findIDProvince')!!}',
            data: {'id':province_id},
            success: function(data){
                for (var i = 0; i < data.length; i++){
                    op += '<option value="'+data[i].id+'">'+data[i].city_name+'</option>';
                }
                div.find('#city').html(" ");
                div.find('#city').append(op);
            },
            error: function(){
                console.log('success');
            },
        });
    });
});

Маршруты (web.php):

Route::namespace('Admin')->prefix('admin')->middleware('auth', 'CheckAdmin')->group(function (){
    $this->get('/findIDProvince', 'SchoolsListController@findIDProvince');
});

Контроллер (Admin / SchoolsListController.php):

public function findIDProvince(Request $request)
    {
        $data = City::select('name', 'id')->where('province_id', $request->id)->take(100)->get();
        return response()->json($data);
    }

HTML (view.blade.php)

<div class="form-group">
    <label class="col-md-3" for="province_name">province_name</label>
    <div class="col-md-9">
        <select id="province_name" name="province_name" class="form-control col-md-12" required>
            @foreach($province_names as $province_name)
                <option value="{{ $province_name->id }}">{{ $province_name->province_name }}</option>
            @endforeach
        </select>
    </div>
</div>
<div class="form-group">
    <label class="col-md-3" for="city_name">city_name</label>
    <div class="col-md-9">
        <select id="city_name" name="city_name" class="form-control col-md-12" required>
        </select>
    </div>
</div>

Что я делаю не так?

Answer 1

// prepend : attach default value to the begining of the dropdown for region
// $('.region').prepend('<option value="default" selected="selected">Please select</option>');

$('.region').on('change', function(e) {


  $('.select2-selection__placeholder').css("font-size", '11px'); // change the font size of the select box
  var region = e.target.value;

  $.ajax({
    url: "{{ url('/dropdown/station?region')}}=" + region, // value.id refers to ring_id
    type: "get",
    cache: false,
    beforeSend: function() {
      $('.ajax-loader').css("visibility", "visible");
    },
    complete: function() {
      $('.ajax-loader').css("visibility", "hidden");
    },
    dataType: 'json',
    success: function(data) {
      // empty the option before we populate the dropdown
      $('#station').empty();

      // define default value
      $('#station').append('<option value="default" selected="selected" disabled hidden></option>');

      $.each(data, function(index, subCatObj) {

        // alert(subCatObj.substation_name);
        $('#station').append($('<option>').text(index).attr('value', index));
        $('#station').append('' + index + '');

      });
    },
    error: function(error) {
      console.log(error);
    }
  });
});


$('.station').on('change', function(e) {
  var station = e.target.value;
  $.ajax({
    url: "{{ url('/dropdown/kv-station?station')}}=" + station, // value.id refers to ring_id
    type: "get",
    cache: false,
    beforeSend: function() {
      $('.ajax-loader').css("visibility", "visible");
    },
    complete: function() {
      $('.ajax-loader').css("visibility", "hidden");
    },
    dataType: 'json',
    success: function(data) {
      // empty the option before we populate the dropdown
      $('#kvStation').empty();

      // define default value
      $('#kvStation').append('<option value="default" selected="selected" disabled hidden></option>');
      $.each(data, function(index, subCatObj) {

        // alert(subCatObj.substation_name);
        $('#kvStation').append($('<option>').text(index).attr('value', index));
        $('#kvStation').append('' + index + '');
      });
    },
    error: function(error) {
      console.log(error);
    }
  });
});

// kv station dropdown event
$('.kvStation').on('change', function(e) {

  var station = e.target.value;


  $.ajax({
    url: "{{ url('/dropdown/ring?station') }}=" + station, // value.id refers to ring_id
    type: "get",
    cache: false,
    beforeSend: function() {
      $('.ajax-loader').css("visibility", "visible");
    },
    complete: function() {
      $('.ajax-loader').css("visibility", "hidden");
    },
    dataType: 'json',
    success: function(data, jqXHR) {

      // remove the previous data ferom select
      $('#ring').empty();

      // checking the status code; if 204: no content, then
      if (jqXHR.status === 204) {
        $('#ring').append('<option value="default" selected="selected">No data</option>');

      } else {
        $('#ring').append('<option value="default" selected="selected" disabled hidden></option>');
      }
      // empty the option before we populate the dropdown


      $.each(data, function(index, subCatObj) {

        $('#ring').append($('<option>').text(subCatObj).attr('value', index));
        $('#ring').append('' + index + '');

      });

    },
    error: function(error) {
      console.log(error);
    }
  });


  // ring dropdown event
  $('.ring').on('change', function(e) {
    var id = e.target.value;
    window.open('{{url(' / ring ')}}/' + id, '_blank');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="bottom">
  <ul>
    <li>
      <label>Region

                        <select id="region-select" class=" form-control select2 region" name="region">
                            <option></option>
                            @foreach($regions as $region)

                                <option value="{{$region->region}}">
                                    {{$region->region}}
                                </option>
                            @endforeach

                        </select>
                        {{--        {!! Form::select('region', $regions,'Please select ...', ['class' => 'region form-control select2', 'id' => 'region-select']) !!}--}}

                    </label>
    </li>

    <li>
      <label>Station
                        <select id="station" class=" selectpicker station form-control input-sm" name="station">
                            <option value=""></option>
                        </select>

                    </label>
    </li>

    <li>
      <label>KV Station
                        <select id="kvStation" class="kvStation form-control input-sm" name="kv-station">
                            <option value=""></option>
                        </select>

                    </label>
    </li>
    <li>
      <label>Ring
                        <select id="ring" class="ring form-control input-sm" name="ring">
                            <option value=""></option>
                        </select>
                    </label>
    </li>
  </ul>

  <i id="loading-image" hidden class="livicon" data-name="spinner-three" data-size="50" data-c="#fff" data-hc="#fff" data-loop="true"></i>

  <div class="ajax-loader">
    <img id="loading-image" class="loading-image img-responsive" src="{{ asset('images/ajax-loader.gif') }}">
  </div>
</div>

Answer 2

Сначала создайте скрытое поле со значением, для которого необходимо выбрать параметр.

<input type="hidden" value="{{ $yourOptionValueToSelect }}" id="selectThis">

Затем с помощью jQuery найдите соответствующее значение в вашем параметре и изменитесоответствующий атрибут как выбранный.

$('option').each(function() {
    if (this.value == $('#selectThis').val()) {
        this.setAttribute('selected', 'selected');
    }
});

Пример:

<input type="hidden" value="2" id="selectThis">

<select>
    <option value="1">Hello</option>
    <option value="2">World</option>
</select>

Здесь Option 2 будет выбран по умолчанию с указанным выше кодом jQuery.По вашему мнению, оно будет изменено на:

<option value="2" selected="selected">World</option>