Question

我有一些像这样的HTML：

<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="tipeInk">
    <label class="control-label">Tipe Tinta :</label>
    <div class="controls" id="labelInk">
       // Dynamic checkbox
    </div>
</div>

如果我的数据库中有这样的表：

+-------------------+--------------+--------------+
|       Type        |     Color    |     Black    |
+-------------------+--------------+--------------+
|       F2410       |     HP703    |     HP60     |
|       810C        |     HP49     |     HP20     |
|       F2410       |     HP78     |     HP45     |
|       F2410       |     HP17     |     HP15     |
+-------------------+--------------+--------------+

我使用jquery，

从上面的表中获取数据

if (id === "HPD") { //ini pake tinta
     $("#selectPrinter").empty();

     var types = [];

    $.ajax({
       url: '<?php echo base_url() . 'control_printer/getTinta/' ?>',
       type: 'POST',
       data: {id: id},
       dataType: 'json',
       success: function(obj) {
            types = obj;
            $('#tipePrinter').show();
            $("#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()));
                    }
            }
        }
     });

     $("#selectPrinter").change(function() {
         // This is the manipulation
     });

并将返回一个json，我存储到这样的变量中：

[
{
    "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"
}
]

如何从场颜色和黑色制作动态chekcbox。例如，如果用户选择F2410，那么将显示两个复选框，即HP703和HP60？

也许，会在div labelInk中添加一些html，如下所示：

<label class="checkbox inline">
  <input type="checkbox" name="colors[]" id="color" value="HP703" /> HP703</label>
<label class="checkbox inline">
  <input type="checkbox" name="colors[]" id="black" value="HP60"/> HP60 </label>

Answer 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>

我对上一个问题采取了类似的方法。然而，为了分配标签做了一些小的调整。当没有从数据库中检索到颜色/黑色时，我们不会在页面上显示相应的复选框。

我将更改功能与分配线分开。这样我就可以从change事件中单独调用该函数，以显示填充select时的第一个选项。

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

此行使用call传递对选择的引用。

动态复选框html使用数据库中的jquery

1 个答案: