-2

尝试运行一个示例以将 JSON 对象解析为下拉列表。使用最新的 jquery-3.3.1.js 和 IE 11。有人可以纠正以下示例吗？

var test = { Cars: [{"CarType": "BMW","carID": "bmw123"},{"CarType": "mercedes","carID": "merc123"}, {"CarType": "volvo","carID": "vol123r"}, {"CarType": "ford", "carID": "ford123"}]};

$(document).ready(function(){           
  var mySelect = $('#reportingQuarter');
    $.each(test.Cars, function(key, value) {   
    mySelect.html($("<option></option>").attr("value",key).text(value)); 
    }); 
 })

<div class="col-md-4 mb-3">
 <label for="reportingQuarter">Reporting Quarter</label>
 <select class="form-control" id="reportingQuarter" required>
 <option value="">Please choose Report Quarter</option>
 </select>
   <div class="invalid-feedback">
   Please select Reporting Quarter.
   </div>
 </div>

错误：下拉列表仅显示 [object Object]

4

2 回答 2

-1

尝试这个

$.each(test.Cars,function(key, value) {
  $("#mySelect").append($('<option></option>').val(value.carID).html(value.CarType));
});
于 2018-03-30T13:19:20.850 回答
-1

我不想带走你的编码风格，但认真尝试一下。

 <!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
var test = { Cars: [{"CarType": "BMW","carID": "bmw123"},{"CarType": "mercedes","carID": "merc123"}, {"CarType": "volvo","carID": "vol123r"}, {"CarType": "ford", "carID": "ford123"}]};

$(document).ready(function(){           
  var mySelect = $('#reportingQuarter');
    $.each(test.Cars, function(key, value) {   
    $("#reportingQuarter").append("<option value="+value.CarType+">"+value.CarType+"</option>"); 
    }); 
 })
</script>
<div class="col-md-4 mb-3">
 <label for="reportingQuarter">Reporting Quarter</label>
 <select class="form-control" id="reportingQuarter" required>
 <option value="">Please choose Report Quarter</option>
 </select>
   <div class="invalid-feedback">
   Please select Reporting Quarter.
   </div>
 </div>
于 2018-03-30T13:21:49.230 回答