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)


});

functionsetLabelsToPage() {
  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] + ")"));
    }
  }


}

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