Question

我试图从JavaScript数组填充HTML选择框，但是当我运行我的页面时，我的控制台输出以下内容：未捕获的TypeError：无法读取属性＆quot; appendChild＆＃39;在hello.html的null：113 但是，因为它是由JavaScript innerHTML创建的，所以我无法选择它。还有另一种选择方式吗？ var police_api_dates = [＆＃34;＆amp; date = 2017-03＆＃34;，]; var info = L.control（）; info.onAdd = function（mymap）{ this._div = L.DomUtil.create（＆＃39; div＆＃39;，＆＃39; info＆＃39;）; this.update（）; 返回this._div; }; info.update = function（properties）{ this._div.innerHTML =＆＃39;＆lt; select id =＆＃34; parent＆＃34;＆gt;＆lt; / select＆gt;＆lt; h4＆gt;突出显示的邮政编码＆lt; / h4＆gt;＆＃39; +（属性？＆＃39;＆LT b取代;邮政编码：＆＃39; + properties.Name ：＆＃39;将鼠标悬停在状态＆＃39;）上; }; var parent = document.getElementById（＆＃34; parent＆＃34;）; for（var pos = 0; pos＆lt; police_api_dates.length; pos ++） { //创建＆lt;选项＆gt;添加＆lt; select＆gt; var child = document.createElement（＆＃34; option＆＃34;）; //为＆lt;选项＆gt;指定值 child.textContent = police_api_dates [pos] child.value = pos; //附上mew＆lt; option＆gt;到＆lt; selection＆gt; parent.appendChild（孩子）; } info.addTo（MyMap中）;

Answer 1

使用此方法...

var police_api_dates = ["&date=2017-03",];

var info = L.control();


info.onAdd = function (mymap) {
    this._div = L.DomUtil.create('div', 'info');
    this.update();
    return this._div;
};


var S='';


for(var i=0; i<police_api_dates.length; i++){

  S=S+'<option value="'+i+'">'+police_api_dates[i]+'</option>';

}



info.update = function (properties) {

 info.innerHTML='<select id="parent">'+S+'</select>'+'<h4>Highlighted Postcode</h4>' + (properties ? '<b> Postcode: ' + properties.Name : 'Hover over a state');
};


parent.innerHTML=S; // Insert the options

parent.selectedIndex=3; // Set your default value


info.addTo(mymap);

注意：我会避免使用像“child”和“parent”这样的变量/ ID名称，因为你正在设置自己的javascript保留字冲突。

更新了代码以使您的序列顺序...让我们看看它是如何发生的。

使用Javascript数组填充HTML <select>

1 个答案: