Selected option on a Dynamic drop-down field

As Laravel offers a way to generate a list from a database, based on a previous choice, in a dynamic dropdown (here is an example): Route:

use App\City;

Route::get('/information/create/ajax-state',function()
{
    $state_id = Input::get('state_id');
    $subcategories = City::where('state_id','=',$state_id)->get();
    return $subcategories;

});

View:

<div class="form-group">
    <label>State
        <select name="state" id="state" class="form-control input-sm">
            <option value=""></option>
            @foreach($states as $state)
               {{ $state->name}}
            @endforeach
           </select>
    </label>
</div>

<div class="form-group">
    <label>City
        <select id="city" class="form-control input-sm" name="city_id">
            <option value=""></option>
       </select>
    </label>
</div>

Javascript:

<script>
    $('#state').on('change', function(e){
        console.log(e);
        var state_id = e.target.value;

        $.get('{{ url('information') }}/create/ajax-state?state_id=' + state_id, function(data) {
            console.log(data);
            $('#city').empty();
            $.each(data, function(index,subCatObj){
                $('#city').append(''+subCatObj.name+'');
            });
        });
    });
</script>

I wonder how we can set a particular option of the list (here cities) as selected, which can be useful for updating a form previously filled by this dynamic dropdown field

Snapey

10 years ago

Level 122

This does not consider ajax, but it might be a help

<select name="cars">

    @foreach($carTypesList as $type =>$name)

          <option value="{{ $type }}"
            @if(old('cars',$profile->car) == {{ $type }})
                selected
            @endif 
                >{{ $name }}
        </option>
        
    @endforeach 

</select>

if you don't like mixing in the test in with the html so much, you could duplicate the line like;

<select name="cars">

    @foreach($carTypesList as $type =>$name)

        @if(old('cars',$profile->car) == $type )
             <option value="{{ $type }}" selected >{{ $name }}</option>
        @else
             <option value="{{ $type }}">{{ $name }}</option>
        @endif
        
    @endforeach 

</select>

Whilst this is not 'dry' it's easier to read and therefore quicker to work with.

This is from a post I contributed to a few weeks ago...https://laracasts.com/discuss/channels/laravel/old-data-didnt-display-in-edit-page

1 like

gildniy

10 years ago

Level 27

Yeap this does work on a simple for-each loop, but I need something more advanced, which would work on the dynamic drop-down select field!

gildniy

10 years ago

Level 27

Here is some thing I think can be right:

$.get('{{ url('information') }}/create/ajax-state?state_id=' + state_id, function(data) {
    console.log(data);
    var city=$('select #city');
     city.empty();
     $.each(data, function(value, display){
         city.append('<option value="' + value + '">' + display + '</option>';
    });
    city.val( concerned id ).prop('selected', true);
});

gildniy

10 years ago

Best Answer

Level 27

For this to work, it required some long lines of codes, which I avail in this github package , thinking this could help someone else! And thanks to you @Snapey , your trick, leads us in good way!

3 likes

Please or to participate in this conversation.