使用jQuery動態選擇基於選項的JSON數據

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”。 依此類推。

PS：第三個選擇選項已禁用

謝謝

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> 

代碼在做什么：

1. 它獲取您的JSON結果（數組）並對其進行迭代。 當找到types ，它將以逗號分隔。
2. 分割的類型將添加到第二select同時使用trim去除前導和尾隨空白。 該選項的值是對類型array索引的引用。
3. 當用戶現在從第二個select選擇打印機類型時，將調用一個更改事件，從而呈現第三個select 。 這些值是指陣列中的索引，因此我們可以提取相應的碳粉。 當有多種墨粉時，將使用與打印機類型相同的技巧。

注意我刪除了這一行： <select id="selectError" data-rel="chosen">多余，導致HTML中斷。 我還將其下面的select元素設置為display: block 。

最后，在我創建的演示中，將HPL選項設置為selected以便顯示。 因此，如果您復制此代碼，則需要將其刪除。

注2： Laserjet需要墨粉和墨盒，因此我不知道選擇噴墨時將返回什么JSON，但請確保您的數據始終以常規格式返回。 因此，而不是toner你可以使用一個更通用的名稱，比如cartridge 。