title: Dynamic select option based json data using jquery
body: <p>I have testing and searching for my case, but still not work. Any help it so appreciated.</p>
  
  <p>I have three select option that implemented php like this :</p>
  
  <pre><code>&lt;div class="control-group" id="merkPrinter"&gt;
  &lt;label class="control-label" for="selectError"&gt;Merk Printer :&lt;/label&gt;
  &lt;div class="controls"&gt;
      &lt;select id="selectError" data-rel="chosen"&gt;
         &lt;select id="selectError" class="chzn-done" data-rel="chosen" style="display: none;"&gt;
           &lt;option value="BRO"&gt;BROTHER&lt;/option&gt;
           &lt;option value="EDM"&gt;EPSON DOT MATRIK&lt;/option&gt;
           &lt;option value="EPD"&gt;EPSON DESKJET&lt;/option&gt;
           &lt;option value="HPD"&gt;HP DESKJET&lt;/option&gt;
           &lt;option value="HPL"&gt;HP LASERJET&lt;/option&gt;
           &lt;option value="HPO"&gt;HP OFFICEJET&lt;/option&gt;
           &lt;option value="KM"&gt;KOINICA MINOLTA&lt;/option&gt;
           &lt;option value="PNS"&gt;PANASONIC&lt;/option&gt;
  
      &lt;/select&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="control-group" id="tipePrinter"&gt;
  &lt;label class="control-label"&gt;Tipe Printer :&lt;/label&gt;
  &lt;div class="controls"&gt;
      &lt;select id="selectPrinter"&gt;
  
      &lt;/select&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="control-group" id="tipeToner"&gt;
  &lt;label class="control-label"&gt;Tipe Toner :&lt;/label&gt;
  &lt;div class="controls"&gt;
      &lt;select id="selectToner" disabled="disabled"&gt;
  
      &lt;/select&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>To passing data from my database, I am using ajax jquery like this :</p>
  
  <pre><code> $(document).ready(function($) {
              $('#tipePrinter').hide();
              $('#tipeToner').hide();
  
  
              $("#merkPrinter").change(function() {
                  var id = $('#selectError option:selected').val(); // return value 
  
  
                  if (id == "HPL") {
  
                      $.ajax({
                          url: '&lt;?php echo base_url() . 'control_printer/getTypePrinter/' ?&gt;',
                          type: 'POST',
                          data: {id: id
                          },
                          dataType: 'json',
                          success: function(obj) {
                              $('#tipePrinter').show();
  
                              $.each(obj, function(i, val) {
                                  var content1 = "&lt;option value=" + val.type + "&gt;" + val.type + "&lt;/option&gt;";
                                  var content2 = "&lt;option value=" + val.toner + "&gt;" + val.toner + "&lt;/option&gt;";
                                  //List all of printer
                                  $("#selectPrinter").append(content1);
  
                                  //Dummy, 
                                  $("#selectToner").append(content2);
                                  $('#tipeToner').show();
  
                              });
                          }
                      });
                  }
                  ;
              });
          });
  </code></pre>
  
  <p>from this ajax, I got JSON like this :</p>
  
  <pre><code>[
  {
      "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"
  }
  ]
  </code></pre>
  
  <p>Let say, the user choose HP Laserjet, 
  the second select option would be showing type of printer e.g :  "P1102, PRO1102W".
  In third select option just viewing toner based second select option that is "CE285A" . And so on, so on.</p>
  
  <p>P.S : third select option is disabled</p>
  
  <p>Thanks</p>