Question

我已经测试并搜索了我的案例，但仍无法正常工作。任何帮助它如此欣赏。

我有三个选择选项，实现了像这样的PHP：

<div class="control-group" id="merkPrinter">
<label class="control-label" for="selectError">Merk Printer :</label>
<div class="controls">
    <select id="selectError" data-rel="chosen">
       <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">Tipe Printer :</label>
<div class="controls">
    <select id="selectPrinter">

    </select>
</div>
</div>

<div class="control-group" id="tipeToner">
<label class="control-label">Tipe Toner :</label>
<div class="controls">
    <select id="selectToner" disabled="disabled">

    </select>
</div>

要从我的数据库传递数据，我正在使用这样的ajax jquery：

 $(document).ready(function($) {
            $('#tipePrinter').hide();
            $('#tipeToner').hide();


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


                if (id == "HPL") {

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

                            $.each(obj, function(i, val) {
                                var content1 = "<option value=" + val.type + ">" + val.type + "</option>";
                                var content2 = "<option value=" + val.toner + ">" + val.toner + "</option>";
                                //List all of printer
                                $("#selectPrinter").append(content1);

                                //Dummy, 
                                $("#selectToner").append(content2);
                                $('#tipeToner').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"
}
]

假设用户选择HP Laserjet，第二个选择选项将显示打印机的类型，例如：“P1102，PRO1102W”。在第三选择选项中，仅查看基于墨粉的第二选择选项“CE285A”。等等，等等。

P.S：禁用第三个选择选项

由于

Answer 1

我会做以下事情：

//lets pretend that the ajax call returned this and put it into a variable.
var types = [{
  "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"
}]

$(document).ready(function($) {
  //user selected the HPL
  //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() ));
        }
    }
  
  //the click handler to the printer type changer should be outside the ajax call
  $("#selectPrinter").change(function(){
      var value = $(this).val();
      $("#selectToner").attr("disabled", false);
      $("#selectToner").html("");
      var tonerTypes = types[value].toner.split(",");
      for (var c = 0; c < tonerTypes.length; c++)
        {
          $("#selectToner").append($("<option></option>").val(i).text(tonerTypes[c].trim() ));
        }       
  })
  
});

<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">HP DESKJET</option>
      <option value="HPL" selected>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>
</div>

<div class="control-group" id="tipeToner">
  <label class="control-label">Tipe Toner :</label>
  <div class="controls">
    <select id="selectToner" disabled="disabled">

    </select>
  </div>

代码在做什么：

它接受你的JSON结果（一个数组）并迭代它。当它找到types时，它将用逗号分隔。
分割后的类型将添加到第二个select，同时使用trim去除前导空格和尾随空格。选项的值是对array类型中的索引的引用。
当用户现在从第二个select中选择打印机类型时，会调用更改事件来呈现第三个select。这些值是指数组中的索引，因此我们可以提取相应的碳粉。当有多个墨粉时，应用与打印机类型相同的技巧。

注意我删除了这一行：<select id="selectError" data-rel="chosen">它是多余的，导致HTML中断。我还将其下方的select元素设置为display: block。

最后，我将HPL选项设置为selected，以便在我创建的演示中显示。因此，如果您复制此代码，则需要将其删除。

注意2 Laserjets需要墨粉，墨盒墨盒，所以我不知道选择喷墨打印机时会返回什么JSON，但要确保始终以一般格式返回数据。因此，您可以使用更通用的名称toner来代替cartridge。

使用jquery基于动态选择选项的json数据

1 个答案: