Dynamic select option based json data using jquery

Question

I have testing and searching for my case, but still not work. Any help it so appreciated.

I have three select option that implemented php like this :

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

To passing data from my database, I am using ajax jquery like this :

 $(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();

                            });
                        }
                    });
                }
                ;
            });
        });

from this ajax, I got JSON like this :

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

Let say, the user choose HP Laserjet, the second select option would be showing type of printer e.g : "P1102, PRO1102W". In third select option just viewing toner based second select option that is "CE285A" . And so on, so on.

P.S : third select option is disabled

Thanks

Why "P1102, PRO1102W" only.. Cant printer be 2015D and toner be 53A? — void
– void, Commented Feb 22, 2015 at 11:23
ya, it just for an example. If user choose type 3030, 1020, 3055, the toner must 12A. So, 2015D must 53A, not 12A or the others. Thanks void ... — Fadly Dzil
– Fadly Dzil, Commented Feb 22, 2015 at 11:35
So wehn user select printer the corresponding toner should get selected automatically? — void
– void, Commented Feb 22, 2015 at 12:17

Mouser · Accepted Answer · 2015-02-22 14:52:55Z

I would do the following:

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

What is the code doing:

It takes your JSON result (an array) and iterates over it. When it finds types it will split this by comma.
The splitted types will be added to the second select while using trim to strip leading and trailing whitespaces. The value of the option is a reference to the index in the types array.
When a user now selects a printer type from the second select a change event is invoked rendering the third select. The values refers to the index in the array so we can extract the corresponding toner. When there are multiple toners the same trick is applied as with the printer types.

NOTE I removed this line: <select id="selectError" data-rel="chosen"> It redundant and caused the HTML to break. I also set the select element below it to display: block.

Finally I set the HPL option to selected for display purposes in the demo I created. So you need to remove that if you copy this code.

NOTE 2 Laserjets require toners, inkjets cartridges, so I don't know what JSON will be returned when selecting inkjets, but make sure that your data always is returned in a general format. So instead of toner you could use a more generic name like cartridge.

Mr. Mouser, can you give me a solution to write the variable types which is an array is directly from the json, not manual like example above ...
In your ajax success function you return the data as variable obj so make a global var in the first line of your success function: types = obj
Mr.Mouser, now I make some difficult for myself. Do you mind for a solution ? stackoverflow.com/questions/28716171/…

Collectives™ on Stack Overflow

Dynamic select option based json data using jquery

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related