使用JavaScript使用JSON数据填充 Select 下拉列表

发布于11月23日

我想使用JavaScript用JSON数据填充一个 Select 下拉列表我有样本数据

sampledata  =  [{ "Districtname": "CENTRAL DELHI", "ID": 1 }, { "Districtname": "NORTH DELHI", "ID": 2 }, { "Districtname": "NORTH EAST DELHI", "ID": 3 }, { "Districtname": "NORTH WEST DELHI", "ID": 4 }, { "Districtname": "SOUTH DELHI", "ID": 5 }, { "Districtname": "SOUTH EAST DELHI", "ID": 6 }, { "Districtname": "SOUTH WEST DELHI", "ID": 7 }, { "Districtname": "WEST DELHI", "ID": 8 }]

success: function(data) {
    var distList = data.d;
    console.log(distList);
    //consoleoutput =  [{ "Districtname": "CENTRAL DELHI", "ID": 1 }, { "Districtname": "NORTH DELHI", "ID": 2 }, { "Districtname": "NORTH EAST DELHI", "ID": 3 }, { "Districtname": "NORTH WEST DELHI", "ID": 4 }, { "Districtname": "SOUTH DELHI", "ID": 5 }, { "Districtname": "SOUTH EAST DELHI", "ID": 6 }, { "Districtname": "SOUTH WEST DELHI", "ID": 7 }, { "Districtname": "WEST DELHI", "ID": 8 }]
    var s = '<option value="-1">Please Select a Distic</option>';
    for (var i = 0; i < distList.length; i++) {
        s += '<option value="' + distList[i].ID + '">' + distList[i].Districtname + '</option>';
    }
    $("#dist").html(s);

}

我try 了另一种方法

$.each(distList, function (key, value) {
  $('#dist').append('<option value="' + key + '">' + value + '</option>');
});

但

Uncaught TypeError: Cannot use 'in' operator to search for 'length' in [{"Districtname":"CENTRAL.................... ,{"Districtname":"WEST DELHI","ID":8}]

请帮帮忙

sampledata = [{ "Districtname": "CENTRAL DELHI", "ID": 1 }, { "Districtname": "NORTH DELHI", "ID": 2 }, { "Districtname": "NORTH EAST DELHI", "ID": 3 }, { "Districtname": "NORTH WEST DELHI", "ID": 4 }, { "Districtname": "SOUTH DELHI", "ID": 5 }, { "Districtname": "SOUTH EAST DELHI", "ID": 6 }, { "Districtname": "SOUTH WEST DELHI", "ID": 7 }, { "Districtname": "WEST DELHI", "ID": 8 }] //Instead of: /* var s = '<option value="-1">Please Select a Distic</option>'; for (var i = 0; i < sampledata.length; i++) { s += '<option value="' + sampledata[i].ID + '">' + sampledata[i].Districtname + '</option>'; } $('#dist').html(s); */ // Default option at select could be // place inside the select of static html. // To iterate "JSON" known as Object inside JS // Try to use for(let district of sampledata) const $selectElement = document.querySelector('#dist'); for(let district of sampledata){ //New HTMLOptionElement let $option = document.createElement('option'); $option.value = district.ID; $option.innerText = district.Districtname; //Add option $selectElement.appendChild($option); }

使用JavaScript使用JSON数据填充 Select 下拉列表

推荐答案

Javascript相关问答推荐

当我使用jQuery时，我的图标显示为[对象对象]

如何使用React渲染器放置根dis？

react 路由加载程序行为

Vega中的模运算符

扫描qr code后出错whatter—web.js

TypeScript索引签名模板限制

在观察框架中搜索CSV数据

如何将Map字符串，布尔值转换为{key：string；value：bo布尔值；}[]？<>

如何用拉威尔惯性Vue依赖下拉？

如何从html元素创建树 struct ？

闭包是将值复制到内存的另一个位置吗？

如何将数组用作复合函数参数？

映射类型定义，其中值对应于键

400 bad request error posting through node-fetch

将数组扩展到对象中

按什么顺序接收`storage`事件？

我想使用GAS和HTML将从Electron 表格中获得的信息插入到文本字段的初始值中

当从其他文件创建类实例时，为什么工作线程不工作？

Next.js无法从外部本地主机获取图像

每隔3个项目交替显示，然后每1个项目交替显示