php - repopulate child dropdow when parent dropdown changed -

tl;dr

how make jquery request parent dropdown ( using .change() ) working url outputs json , repopulate child dropdown.

end tl;dr

i'm using laravel 5.1 code bit laravel specific not since beginner level jquery problem.

i have 2 dropdowns. 1 categories (parent) , other subcategories (child).

my parent dropdown:

<div class="form-group">     {!! form::label('category_id', '*categories') !!}     {!! form::select('category_id', $categories, null) !!} </div> 

which generates

<div>     <label for="category_id">categories</label>     <select id="category_id" name="category_id">         <option value="1">category 1</option>         <option value="2">category 2</option>         <option value="3">category 3</option>     </select> </div> 

my child dropdown:

<div sytle="display:none;">     {!! form::label('subcategory_id', 'subcategory') !!}     {!! form::select('subcategory_id', [], null) !!} </div> 

which generates

<div sytle="display:none;">     <label for="subcategory_id">subcategories</label>     <select id="subcategory_id" name="subcategory_id">     </select> </div> 

i have defined route: subcategoriesfordropdown/{i} send i , gives me json children of parent category. example if use url subcategoriesfordropdown/2 get:

{"3":"subcategory 1 title","4":"subcategory 2 title"} 

numbers in "" subcategories ids. working properly.

now want repopulate child dropdown these id/title pairs get:

<div sytle="display:none;">     <label for="subcategory_id">subcategories</label>     <select id="subcategory_id" name="subcategory_id">         <option value="3">subcategory 1 title</option>         <option value="4">subcategory 2 title</option>     </select> </div> 

i made jquery script:

<script> $(document).ready(function(){     $("#category_id").change(function (){         var category = $(this).val();         alert( "category: " + category );     }); }); </script> 

and pops alert box category id change parent dropdown values. however, instead of alert function want run post request (i believe post right 1 here ok too) json data , create options values it. change display:none; shouldn't problem.

i tried replacing alert(); with:

$.post( "/subcategoriesfordropdown/" + category, , function( data ){     alert( "data: " + data ); }); 

to receive data given subcategoriesfordropdown/{i} i'm failing here.

so here todo list:

• run post request
• get json data
• populate child dropdown json data
• remove display:none; attribute

i hope ain't missing elese here. thank in advance!

you're on right tracks.

the issue see $.post , after category. i'd suggest using "json" tag - prevents have use json_decode within function.

to update select box can use javascript along these lines. (untested, theoretically correct barring typos)

$.post( "/subcategoriesfordropdown/" + category, function( data ){      var $select = $('#subcategory_id');      $select.empty();      $.each(data, function(value, text){           $select.append($("<option></option>")               .attr("value", value).text(text));      });      $select.show(); }, "json");