заселить ребенок dropdow когда родитель выпадающий изменился

Question

TL; DR

Как сделать запрос JQuery из родительских выпадающего списка (с помощью .Кнопки()), чтобы работать URL, который выводит JSON и заселить ребенок выпадающего меню.

END TL; DR

Я использую Laravel 5.1 так что мой код будет немного Laravel конкретная, но не так много, так как это начальный уровень проблемы JQuery.

У меня есть два выпадающих меню. Один для категорий (родительский), а другой - для подкатегорий (дочерний).

Мой родитель выпадающий:

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

, который генерирует

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

Мой ребенок выпадающий:

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

, который генерирует

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

Я определил маршрут: subcategoriesfordropdown/{i}, на который я отправляю i, и он дает мне JSON с детьми родительской категории. Например, если я использую URL subcategoriesfordropdown/2 я получаю:

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

Числа в "" являются идентификаторы подкатегорий. Все это работает нормально.

Теперь я хочу, чтобы заселить ребенка выпадающий список с этим ID/название пары, так что я получаю:

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

Я сделал этот скрипт JQuery:

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

И появляется окно предупреждения с категории ID, когда я изменяю значения выпадающего родителя. Однако вместо функции предупреждения я хочу, чтобы он выполнял запрос POST (я считаю, что POST является правильным здесь, но GET тоже в порядке), чтобы получить данные JSON и создать из него значения параметров. Также измените display:none;, но это не должно быть проблемой.

Я попытался заменить alert(); с:

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

получить данные, предоставленные subcategoriesfordropdown/{i} но я неудачу здесь.

Так вот мой список TODO:

• запрос запуска POST
• получить данные в формате JSON
• Заселите ребенок выпадающий с данными JSON
• удалить дисплей: нет; атрибут

Надеюсь, что здесь я не пропущу что-то в этом роде. Спасибо всем заранее!

Answer 1

Вы определенно находитесь на правильных дорожках.

Единственный вопрос, который я вижу с вашим $.post, является дополнительным , после category. Я бы также предложил использовать тег json - он просто мешает вам использовать json_decode внутри функции.

Чтобы обновить поле выбора, вы можете использовать Javascript вдоль этих строк. (непроверенные, но теоретически правильные запрещая опечаток)

$.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");