Dynamic Checkbox Html Using Jquery From Database

I have some html like this :

Tipe Printer :

Solution 1:

var types = [{
  "id_printer": "HPD",
  "type": "F2410",
  "color": "HP703",
  "black": "HP60"
}, {
  "id_printer": "HPD",
  "type": "810C",
  "color": "HP49",
  "black": "HP20"
}, {
  "id_printer": "HPD",
  "type": "1220C",
  "color": "HP78",
  "black": "HP45"
}, {
  "id_printer": "HPD",
  "type": "840C",
  "color": "HP17",
  "black": "HP15"
}]


$(document).ready(function($) {
  //user selected the HPD
  //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()));
    }
    
  }
  setLabelsToPage.call($("#selectPrinter")[0]);

  //the click handler to the printer type changer should be outside the ajax call
  $("#selectPrinter").on("change", setLabelsToPage)


});

function setLabelsToPage() {
  var value = $(this).val();
  $(".checkBox_controls").empty();
  var options = [];

  if (types[value].color || types[value].black) {
    types[value].color ? options.push(["color", types[value].color]) : null;
    types[value].black ? options.push(["black", types[value].black]) : null;
    for (var i = 0; i < options.length; ++i) {
      $(".checkBox_controls").append($("<input />").attr("name", "color[]").attr("type", "checkbox").val(options[i][1]).attr("id", "checkbox_" + options[i][0]));
      $(".checkBox_controls").append($("<label></label>").attr("for", "checkbox_" + options[i][0]).html(options[i][1] + " (" + options[i][0] + ")"));
    }
  }


}

<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" selected>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 class="checkBox_controls">

    </div>

  </div>
</div>

I took a similar approach as to the previous question. However made some slight adjustments, for assigning the labels. When there is no color/black retrieved from the database the corresponding checkbox won't we shown on the page.

I separated the change function from the assignment line. This way I could call the function from separately from the change event, to show the first options when the select is populated.

setLabelsToPage.call($("#selectPrinter")[0]);

This line passes a reference to the select using call.

Share