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

// 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.info(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.info(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.info(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>