Динамический выбор на основе json-данных с использованием jquery

Question

У меня есть тестирование и поиск моего дела, но все же не работает. Любая помощь ему так ценится.

У меня есть три выбора опции, которые реализованы PHP, как это:

<div class="control-group" id="merkPrinter"> 
<label class="control-label" for="selectError">Merk Printer :</label> 
<div class="controls"> 
    <select id="selectError" data-rel="chosen"> 
     <select id="selectError" class="chzn-done" data-rel="chosen" style="display: none;"> 
     <option value="BRO">BROTHER</option> 
     <option value="EDM">EPSON DOT MATRIK</option> 
     <option value="EPD">EPSON DESKJET</option> 
     <option value="HPD">HP DESKJET</option> 
     <option value="HPL">HP LASERJET</option> 
     <option value="HPO">HP OFFICEJET</option> 
     <option value="KM">KOINICA MINOLTA</option> 
     <option value="PNS">PANASONIC</option> 

    </select> 
</div> 
</div> 

<div class="control-group" id="tipePrinter"> 
<label class="control-label">Tipe Printer :</label> 
<div class="controls"> 
    <select id="selectPrinter"> 

    </select> 
</div> 
</div> 

<div class="control-group" id="tipeToner"> 
<label class="control-label">Tipe Toner :</label> 
<div class="controls"> 
    <select id="selectToner" disabled="disabled"> 

    </select> 
</div> 

Для передачи данных из моей базы данных, я использую Ajax JQuery, как это:

$(document).ready(function($) { 
      $('#tipePrinter').hide(); 
      $('#tipeToner').hide(); 


      $("#merkPrinter").change(function() { 
       var id = $('#selectError option:selected').val(); // return value 


       if (id == "HPL") { 

        $.ajax({ 
         url: '<?php echo base_url() . 'control_printer/getTypePrinter/' ?>', 
         type: 'POST', 
         data: {id: id 
         }, 
         dataType: 'json', 
         success: function(obj) { 
          $('#tipePrinter').show(); 

          $.each(obj, function(i, val) { 
           var content1 = "<option value=" + val.type + ">" + val.type + "</option>"; 
           var content2 = "<option value=" + val.toner + ">" + val.toner + "</option>"; 
           //List all of printer 
           $("#selectPrinter").append(content1); 

           //Dummy, 
           $("#selectToner").append(content2); 
           $('#tipeToner').show(); 

          }); 
         } 
        }); 
       } 
       ; 
      }); 
     }); 

от этого ajax, я получил JSON вот так:

[ 
{ 
    "id_printer": "HPL", 
    "type": "3030, 1020, 3055", 
    "toner": "12A" 
}, 
{ 
    "id_printer": "HPL", 
    "type": "1200", 
    "toner": "15A" 
}, 
{ 
    "id_printer": "HPL", 
    "type": "P1106", 
    "toner": "35A" 
}, 
{ 
    "id_printer": "HPL", 
    "type": "PIXMAX", 
    "toner": "328" 
}, 
{ 
    "id_printer": "HPL", 
    "type": "1160, 1320", 
    "toner": "49A" 
}, 
{ 
    "id_printer": "HPL", 
    "type": "2015D", 
    "toner": "53A" 
}, 
{ 
    "id_printer": "HPL", 
    "type": "P1102, PRO1102W", 
    "toner": "CE285A" 
} 
] 

Предположим, пользователь выбрал HP Laserjet, , второй вариант выбора будет показывать тип принтера, например: «P1102, PRO1102W». В третьей опции выбора только просмотр второго варианта выбора тонера, который является «CE285A». И так далее, и так далее.

P.S: третий выберите параметр отключен

Благодаря

Answer 1

Я хотел бы сделать следующее:

//lets pretend that the ajax call returned this and put it into a variable. 
 
var types = [{ 
 
    "id_printer": "HPL", 
 
    "type": "3030, 1020, 3055", 
 
    "toner": "12A" 
 
}, { 
 
    "id_printer": "HPL", 
 
    "type": "1200", 
 
    "toner": "15A" 
 
}, { 
 
    "id_printer": "HPL", 
 
    "type": "P1106", 
 
    "toner": "35A" 
 
}, { 
 
    "id_printer": "HPL", 
 
    "type": "PIXMAX", 
 
    "toner": "328" 
 
}, { 
 
    "id_printer": "HPL", 
 
    "type": "1160, 1320", 
 
    "toner": "49A" 
 
}, { 
 
    "id_printer": "HPL", 
 
    "type": "2015D", 
 
    "toner": "53A" 
 
}, { 
 
    "id_printer": "HPL", 
 
    "type": "P1102, PRO1102W", 
 
    "toner": "CE285A" 
 
}] 
 

 
$(document).ready(function($) { 
 
    //user selected the HPL 
 
    //this should be in the success function of the Ajax call 
 
    $("#selectPrinter").html(""); 
 
    for (var i = 0; i < types.length; i++) 
 
    { 
 
     
 
     var printerTypes = types[i].type.split(","); 
 
     for (var c = 0; c < printerTypes.length; c++) 
 
     { 
 
      $("#selectPrinter").append($("<option></option>").val(i).text(printerTypes[c].trim())); 
 
     } 
 
    } 
 
    
 
    //the click handler to the printer type changer should be outside the ajax call 
 
    $("#selectPrinter").change(function(){ 
 
     var value = $(this).val(); 
 
     $("#selectToner").attr("disabled", false); 
 
     $("#selectToner").html(""); 
 
     var tonerTypes = types[value].toner.split(","); 
 
     for (var c = 0; c < tonerTypes.length; c++) 
 
     { 
 
      $("#selectToner").append($("<option></option>").val(i).text(tonerTypes[c].trim())); 
 
     }  
 
    }) 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="control-group" id="merkPrinter"> 
 
    <label class="control-label" for="selectError">Merk Printer :</label> 
 
    <div class="controls"> 
 
    <select id="selectError" class="chzn-done" data-rel="chosen" style="display: block;"> 
 
     <option value="BRO">BROTHER</option> 
 
     <option value="EDM">EPSON DOT MATRIK</option> 
 
     <option value="EPD">EPSON DESKJET</option> 
 
     <option value="HPD">HP DESKJET</option> 
 
     <option value="HPL" selected>HP LASERJET</option> 
 
     <option value="HPO">HP OFFICEJET</option> 
 
     <option value="KM">KOINICA MINOLTA</option> 
 
     <option value="PNS">PANASONIC</option> 
 

 
    </select> 
 
    </div> 
 
</div> 
 

 
<div class="control-group" id="tipePrinter"> 
 
    <label class="control-label">Tipe Printer :</label> 
 
    <div class="controls"> 
 
    <select id="selectPrinter"> 
 

 
    </select> 
 
    </div> 
 
</div> 
 

 
<div class="control-group" id="tipeToner"> 
 
    <label class="control-label">Tipe Toner :</label> 
 
    <div class="controls"> 
 
    <select id="selectToner" disabled="disabled"> 
 

 
    </select> 
 
    </div>

Что такое код делает:

1. Он берет ваш результат JSON (массив) и выполняет итерацию по нему. Когда он найдет types, он разделит его на запятую.
2. Разделенные типы будут добавлены ко второму select при использовании trim для разметки ведущих и завершающих пробелов. Значение параметра является ссылкой на индекс в типах array.
3. Когда пользователь теперь выбирает тип принтера из второго select, вызывается событие изменения, отображающее третий select. Значения относятся к индексу в массиве, поэтому мы можем извлечь соответствующий тонер. Когда имеется несколько тонеров, применяется тот же трюк, что и для типов принтеров.

Примечание я удалил эту строку: <select id="selectError" data-rel="chosen"> Это избыточную и вызвало HTML ломаться. Я также установил для него элемент select display: block.

Наконец, я установил HPL вариант selected для демонстрации в демонстрации, которую я создал. Поэтому вам нужно удалить это, если вы скопируете этот код.

Примечание 2 Laserjets требуют тонеры, картриджи струйных принтеров, так что я не знаю, что JSON будет возвращен при выборе струйных принтеров, но убедитесь, что ваши данные всегда возвращаются в общий формат. Поэтому вместо toner вы можете использовать более общее имя, например cartridge.