trouble populating data to a select menu dropdown

trouble populating data to a select menu dropdown

Hi,

I'm Having trouble populating data from a simple json to a select menu dropdown using jquery.I tried using so many codes,but the problem still persist.Can any 1 please help.


I checked in the console of the browser.There its showing that the data has been fetched and populated.But not showing on the dropdown.I tried two three ways but can't get a way around.

Code :
html
  1. <select name="MODEL" id="MODELS" data-native-menu="false" data-mini="true">
  3. </select>

js

  1. $.ajax({
  2.             url : 'ModelDet.json',
  3.             cache: false,
  4.             type : "GET",
  5.             data :{},
  6.             dataType : "json",
  7.             success : function(json) {
  8.              for(i=0;i<json.modelDet.length;i++){
  9.             var temp = json.modelDet[i].MODEL;
  10.             var output = [];
  11.             output.push('<option value="' + temp+'">' + temp + '</option>');
  12.             console.log(output);
  13.             /*var result = $('#MODEL').append($("<option></option>").val(temp).html(temp));*/
  14.             var result = $('#MODELS').append('<option value="' + temp+'">' + temp + '</option>');
  15.             console.log(result);
  16.             }
  17.                 }
  18.         }); 

model

  1. {
  2. "modelDet" : [{
  3. "id" : 1, 
  4. "MODEL_GROUP" : "A",
  5. "MODEL" : "BMW",
  6. "MODEL_VARIENT" : "A001",
  7. "COLOR" : "RED",
  8. "QTY" : 1
  9. }, {
  10. "id" : 2,
  11. "MODEL_GROUP" : "B",
  12. "MODEL" : "RENAULT DUSTER",
  13. "MODEL_VARIENT" : "B001",
  14. "COLOR" : "RED",
  15. "QTY" : 1
  16. }, {
  17. "id" : 3,
  18. "MODEL_GROUP" : "C",
  19. "MODEL" : "AUDI",
  20. "MODEL_VARIENT" : "C001",
  21. "COLOR" : "RED",
  22. "QTY" : 1
  23. }, {
  24. "id" : 4,
  25. "MODEL_GROUP" : "D",
  26. "MODEL" : "BMW",
  27. "MODEL_VARIENT" : "D001",
  28. "COLOR" : "RED",
  29. "QTY" : 1
  30. }]
  31. }