Populate dropdown based on another dropdown selected value in laravel - edit form

Question

I found how to accomplish this on another site and I got it working. My issue is though that I need to use it in my edit form (preferably in the same form as my create form, since my create and edit views use the same form). When I go to my edit page, the "Section" dropdown value is selected as it should be. But the "Subsection" is not, because ofcourse I did not click it. Probably it's a fix too easy for me to see, but I am not quite good with javascript. I basically need the second dropdown (the subsection one) to show the correct options based on which "section" (first dropdown) is selected, on my edit view.

Section Model:

public function subsections()
{
    return $this->hasMany('App\Subsection');
}

Subsection Model:

public function section()
{
    return $this->belongsTo('App\Section');
}

View:

{!! Form::select('section_id', [null=>'-- Select Section --'] + $sections, null, array('id' => 'section')) !!}

<select id="subsection" name="subsection_id" class="select">
    <option>-- First Select Section --</option>
</select>

From my controller: $sections = Section::lists('section', 'id');

Script:

<script>
$(document).ready(function($){
    $('#section').change(function(){
        $.get("{{ url('api/dropdown')}}", 
        { option: $(this).val() }, 
        function(data) {
            $('#subsection').empty(); 
            $.each(data, function(key, element) {
                $('#subsection').append("<option value='" + key +"'>" + element + "</option>");
            });
        });
    });
});
</script>

Route:

Route::get('api/dropdown', function(){
    $id = Input::get('option');
    $subsections = Section::find($id)->subsections;
    return $subsections->lists('subsection', 'id');
});

Bharat Geleda · Accepted Answer · 2015-11-03 15:17:56Z

1

If you just want to select the first option in jquery , you can add :

$('#subsection option:eq(1)').prop('selected', true);

Or else if you want to select a particular value, you can do that by

$('#subsection option[value="value_to_be_selected"]').prop('selected', true);

Use this after you have appended all the values to the subsection

answered Nov 3, 2015 at 15:17

Bharat Geleda

2,8571 gold badge25 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Hardist Over a year ago

Sounds good, but the main issue is that the subsection dropdown does not get populated automatically. It does when I select something in the section dropdown, but on my edit page I want the section AND subsection dropdowns to be shown, populated, and the right values selected. So maybe it is a more difficult issue than I expected? :)

Bharat Geleda Over a year ago

Well, I am assuming you're using different views for edit and create and including the same form, so what you could do is, add an extra script in the edit page to just set the values in the form, which you'd be passing from the controller/route function edit method.

Hardist Over a year ago

I had an epiphany. On my form, I just show the subsection dropdown with a query where section = ... and so on. And once I change the section, the subsection dropdown will be changed also. Problem solved. I will post my own answer.

phpdroid Over a year ago

@BharatGeleda please your views on my answer?

Hardist · Accepted Answer · 2015-11-04 08:11:29Z

1

In my controller I added:

    $subsections = Subsection::where('section_id', '=', $transaction->section_id)->orderBy('subsection', 'asc')->lists('subsection', 'id');

And in my view I did this:

    @if(isset($transaction))
    {!! Form::select('subsection_id', [null=>'-- Select Subsection --'] + $subsections, null, array('class' => 'select', 'id' => 'subsection')) !!}
    @else
        <select id="subsection" name="subsection_id" class="select">
            <option>-- First Select Section --</option>
        </select>
    @endif

Problem solved :)

answered Nov 4, 2015 at 8:11

Hardist

2,01111 gold badges53 silver badges95 bronze badges

Comments

phpdroid · Accepted Answer · 2019-01-17 05:14:44Z

So, what we will do is initially we will send value to the dependent drop-down as
"<option value="">Select Something</option>" and when returning on error create complete drop-down with selected as below value and return, this will reduce lots of javascript calls.
Controller:

if($error){
//create get array of second drop-down, suppose $second_drop
// create complete second drop-down like
$selectbox="";
foreach($second_drop as $option){
            $selectbox.="<option value='". $option->id."'";
            if($request->option2==$ $option->id){
                $selectbox.=" selected ";
            }

            $selectbox.=">".$option->value."</option>";
        }
}
return view('routename', ['selectbox2' =>   $selectbox]);

View:

<select id="subsection" name="subsection_id" class="select">
    {!! $selectbox !!}
</select>

Collectives™ on Stack Overflow

Populate dropdown based on another dropdown selected value in laravel - edit form

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related