Auto Filtering the json data based on the selected option using jquery is not working

Question

I wrote the code for filtering the drop down list based on the selected option using jquery and the data is in json format and data is coming from database. Whenever I select the drop down list ,then it is not going inside the loop. Here is the code:

    <select  name="edept" id="Marque" class="form-control ">
    <option value="">-- Select Department --</option>
    <option value="General Physician" >General Physician</option>
    <option value="Gynecologist">Gynecologist</option>
    <option value="Surgeon">Surgeon</option>
    <option value="Plastic Surgeon">Plastic Surgeon</option>
    <option value="Pediatrician">Pediatrician</option>
    <option value="Cardialogist">Cardialogist</option>
    <option value="Dermetologist">Dermetologist</option>
    <option value="Gastroenterologist">Gastroenterologist</option>
    <option value="Dentist">Dentist</option>
    <option value="Nephrology">Nephrology</option>
    <option value="Neurology">Neurology</option>
    <option value="Orthopaediatrics">Orthopaediatrics</option>
    <option value="Cardiovascular">Cardiovascular</option>
    <option value="Urology">Urology</option>
    <option value="ENT">ENT</option>
    <option value="Fertility">Fertility</option>

    </select>

<select class="form-control" id="Serie" name="doctorname" required="required"></select> // this is the drop down where it filters based on the above drop down.

//Jquery code

 var tabMarque = [];
  var jsondata=<%=data%>; // this is the json data which is coming fro data base . json data is like :{"fertility":[["anviksha","anviksha"]],"ent":[["vishunadh","vishunadh"]} like key value pairs



    console.log("hi");
    console.log(jsondata);

    $.each(jsondata, function(index, val) {
      tabMarque[index] = val;
    });


  $('#Marque').change(function(event) {
   //  alert('Marque_change');
    var datas = $(this).val();
  // alert(datas);
  console.log(datas);

    var htmlOption = '<option value="0">Please select any one option</option>';
    if (datas != '0') {
      var itemsMarque = tabMarque[datas];// here it prints as undefined
     // alert(itemsMarque);
     // alert(JSON.stringify(itemsMarque));
     console.log(itemsMarque);
     console.log(JSON.stringify(itemsMarque));
      $.each(itemsMarque, function(key, value) {
      //  alert("k=" + key + " v=" + JSON.stringify(value));
        htmlOption += '<option value="' + value[key] +'">' + value[value] + '</option>';
      });

    }
    $('#Serie').html(htmlOption);



  });


});

Please help me out. Thanks in advance

Answer 1

The value of the option in the dropdown option should be same as key of JSON data.

Change

<option value="ENT">ENT</option>

to

<option value="ent">ENT</option>

1st Edit: To display the proper values in dropdown.

Replace

htmlOption += '<option value="' + value[key] +'">' + value[value] + '</option>';

with

htmlOption += '<option value="' + value[key] +'">' + value + '</option>';