Question

我有以下JSON数据：

[{
  "in_id": "1", 
  "in_name": "Education Point",
  "in_email": "",
  "in_pin": "834006"
}, {
  "in_id": "2",
  "in_name": "Vidya Coaching Center",
  "in_email": "",
  "in_pin": "834006"
}]

我想在select标签中显示它。我正在尝试这样：

$.ajax({
  type: 'post',
  url: "<?=base_url()?>affiliates/get_institute/" + pin_code,
  dataType: 'json',
  success: function(data) {
    var html = '';
    var i;
    for (i = 0; i < data.length; i++) {
      html += "<option value='" + data[i].in_name + "'>" + data[i].in_name + "</option>";
    }
    $('select[name="sel_inst"]').append(html);
  }
});

Answer 1

您需要在HTML中添加<select name="sel_inst"></select>。

您应该将in_id设置为option的值，而不是in_name

我试图复制，但效果很好

var data = [{"in_id":"1","in_name":"Education Point","in_email":"","in_pin":"834006"},{"in_id":"2","in_name":"Vidya Coaching Center","in_email":"","in_pin":"834006"}];
var html = '';
                  var i;
                  for(i=0; i<data.length; i++){
                      html +="<option value='" +data[i].in_id+"'>"+data[i].in_name+"</option>";
                    }
                  $( 'select[name="sel_inst"]').append(html);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="sel_inst"></select>

Answer 2

Nguyen Hien说，您需要在HTML中添加选择标记。

并且您应该将in_id设置为option的值，而不是in_name

还使用sel_inst作为id，我决定改用foreach并成功

希望有帮助

let data = [{
  "in_id": "1", 
  "in_name": "Education Point",
  "in_email": "",
  "in_pin": "834006"
}, {
  "in_id": "2",
  "in_name": "Vidya Coaching Center",
  "in_email": "",
  "in_pin": "834006"
}];

let selectBox = $('#sel_inst');
$.each(data,function(index,item){
$(selectBox).append('<option value="'+item.in_id+'" data-pin="'+item.in_pin+'">'+item.in_name+'</option>')
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<select name="sel_inst" id="sel_inst">

</select>

如何使用jQuery获取和操作JSON数据并在HTML中显示

2 个答案: