Question

我有一些html，我将使用jquery操作。这是代码：

<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: none;">
           <option value="BRO">BROTHER</option>
           <option value="EDM">EPSON DOT MATRIK</option>
           <option value="EPD">EPSON DESKJET</option>
           <option value="HPD">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" for="selectError1">Tipe Printer :</label>
      <div class="controls">
         <select id="selectError1" data-rel="chosen">
         </select>
      </div>
</div>

<div class="control-group" id="tipeToner">
    <label class="control-label" for="selectError2" >Tipe Toner :</label>
       <div class="controls">
          <select id="selectError2" data-rel="chosen">
          </select>
       </div>
 </div>

然后我得到ajax Jquery在这段代码中完成它的工作：

 $('#tipePrinter').hide();
 $('#tipeToner').hide();

 $("#merkPrinter").change(function() {
 var id = $('#selectError option:selected').val(); // return value from selected

 if (id == "HPL") {

      $.ajax({
          url: '<?php echo base_url() . 'control_printer/getTypePrinter/' ?>',
          type: 'POST',
          data: {id: id},
          dataType: 'json',
          success: function(obj) {
               $('#tipePrinter').show();
              }
          });
     };
    });

如果ajax像这样返回json：

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

如何使HTML选项列表基于json动态化？如何在ajax中成功创建这样的HTML：

<div class="control-group" id="tipePrinter">
    <label class="control-label" for="selectError1">Tipe Printer :</label>
    <div class="controls">
       <select id="selectError1" data-rel="chosen">

          // This is the problem , I want to create option based json  
          <option value="3030, 1020, 3055"> 3030, 1020, 3055 </option>
       </select>
    </div>
 </div>

 <div class="control-group" id="tipeToner">
    <label class="control-label" for="selectError2" >Tipe Toner :</label>
       <div class="controls">
          <select id="selectError2" data-rel="chosen">
              <option value="12A"> 12A </option>
          </select>
       </div>
 </div>

Answer 1

AJAX修改

 $.ajax({
          url: '<?php echo base_url() . 'control_printer/getTypePrinter/' ?>',
          type: 'POST',
          data: {id: id},
          dataType: 'json',
          success: function(obj) {
               $('#tipePrinter').show();
                  $.each(obj,function(val,i){
                    var content1="<option value="'+val.type+'"> "'+val.type+'" </option> ";     
                    var content2="<option value="'+val.toner+'"> "'+val.toner+'"</option>";    
                    $("#selectError1").append(content1);   
                    $("#selectError2").append(content2);  
                 });
              }
          });

它会正常工作

如何使用JQUERY从JSON哈希创建HTML选择选项？

1 个答案: