0

Ситуация следующая. Есть список, при выборе значения из списка должен подгружаться следующий список, при выборе в нем должен еще подгружаться один список. Я сделал подгрузку одного select, второй не получается.

        <select id="id_dep" class="form-control wi" name="id_dep" required="required">
            <option value="0" selected disabled>Вибрати</option>
             <option value="1" >Раздел 1</option>
             <option value="2" >Раздел 2</option>
             <option value="3" >Раздел 3</option>    
        </select>
    <div class="form-group" id="sh_d"  style="display:none;">
        <label>Подраздел</label>
        <div id="sub"></div>
    </div>

    <div class="form-group" id="sh_e"  style="display:none;">
        <label>Категория</label>
        <div id="cat"></div>
    </div>

    <script>
    jQuery(document).ready(function() {
        $('form select[id=id_dep]').change(function (){
            var id = $(this).val();
            $('#id_sub').remove();

            $.ajax({
                url:"/admin/order/getAjaxSub",
                type:"POST",
                dataType: 'json',
                data:{id_dep:id},
                success: function(data){
                    createSelectSub(data);
                }

            });
        });

        function createSelectSub(data)
        {
            $("#sh_d").css('display','block');
            var sel = $('<select id=\'id_sub\' class=\'form-control wi\' required>').appendTo('#sub').attr('name','id_sub');
            sel.append('<option value=\'0\' disabled selected>Вибрати</option>');
            $(data).each(function(){
                sel.append($("<option>").attr('value',this.id_sub).text(this.name));
            });
        }

        $('form select[id=id_sub]').change(function (){
            var id = $(this).val();
            $('#id_cat').remove();

            $.ajax({
                url:"/admin/order/getAjaxCat",
                type:"POST",
                dataType: 'json',
                data:{id_sub:id},
                success: function(data){
                    createSelectCat(data);
                }

            });
        });

        function createSelectCat(data)
        {
            $("#sh_e").css('display','block');
            var sel = $('<select id=\'id_cat\' class=\'form-control wi\' required>').appendTo('#cat').attr('name','id_cat');
            sel.append('<option value=\'0\' disabled selected>Вибрати</option>');
            $(data).each(function(){
                sel.append($("<option>").attr('value',this.id_cat).text(this.name));
            });
        }
    });
</script>

Подгрузка первого слекта (подраздел) работает, а второго нет. То есть не срабатывает change события. Как можно исправить данную проблему?

2 ответа 2

1

Юзайте select2 http://select2.github.io/select2/

-1

Вы элемент <select id="id_sub" .../> создаете динамически при вызове Ajax в createSelectSub. Поэтому на момент вызова вот этой строчки:

$('form select[id=id_sub]').change(function (){ 
   ... 
});

Ваш элемент еще не существует, потому он не получает привязку этого события и вызываться там нечему.

1
  • Спасибо. Решил данную проблему. Добавил пустой select в <div id="sub"><select id="id_sub"></select></div>. А в createSelectSub добавляю сами option. Подгрузка работает, спасибо.
    – depredator
    Commented 14 февр. 2015 в 7:54

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.