将来自API的JSON数据放入html中的选择字段

Question

我要求从API获取并且它会抛出这个

如何使用jquery ajax将其放入html选择字段？

我希望它成为这样的东西：

<select>
     <option>Child (between 3 - 12)</option>
     <option>Transport or Direct ticket</option>
     <option>Baby (3 and under free)</option>
     <option>Senior Price (60+ years)</option>
     <option>Child (between 3 - 12)</option>
     <option>Adult</option>
</select>

Answer 1

var data = '{"data": [{"pricebook_item": ""}, {"pricebook_item": ""}]}';
var jsonData = JSON.parse(data);

var select = '<select>';

for (var i in jsonData) {
   select += '<option value="' + jsonData[i].item + '">' + jsonData[i].item + '</option>';
}
select += '</select>';
$("#selector").html(select);

此代码将循环抛出JSON数组并生成HTML select并将其插入到selector id的元素中。

Answer 2

var jsonData = JSON.parse(json);//where json is the JSON data.

var selectHTML = '<select>';
for(i=0;i<jsonData['pricebook_item'].length;i++){
     selectHTML+= '<option value="' + jsonData['pricebook_item'][i] + '">' + jsonData['pricebook_item'][i] + '</option>';
    }
selectHTML+= '</select>';

现在selectHTML是包含select pre创建的变量，现在可以通过javascript或jquery将其放在HTML div中。希望我能帮忙。

Answer 3

我认为你的身体上的选择有一个选择器Id。如果没有，你可以创建选择，然后将其附加到正文。

    var jsonData = JSON.parse(json);
    var mySelect = $('#SelectorId');
     $.each(jsonData , function (index, item) {
        mySelect.append(
           $('<option>').text(item.pricebook_item)
                        .val(item.pricebook_item));
     });