我有一些像这样的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"
}
]
如何使动态复选框表单字段颜色和黑色。例如,如果用户选择 F2410,那么会显示两个复选框,即 HP 703 和 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>