如何创建下拉菜单

Question

I want to generate a list on items in a drop down based on a previous choice from another select. All items ar in the database.

Here is what I did:

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

Routes (web.php):

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

Controller (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>

What am I doing wrong?

Answer 1

First, create a hidden filed with the value for which the option that need to be selected.

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

Then with jQuery find the matching value from your option and change the corresponding attribute as selected.

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

Example:

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

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

Here Option 2 will be selected by default with the above jQuery Code. In your view it will be changed to:

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