HTML:
<body>
<label>
Year:
</label>
<select id="selectMe">
<option>
</option>
</select>
</br>
<label>
Make:
</label>
<select>
<option>
</option>
</select>
</br>
<label>
Model:
</label>
<select>
<option>
</option>
</select>
</br>
<script src="script.js" type="text/javascript"></script>
Javascript:
function printIteration(){
var vehicleData = [{year: 2015, make: "Audi", model: "A4"},
{year: 2014, make: "Benz", model: "c2000"},
{year: 2015, make: "Maruti", model: "s-cross"},
{year: 2015, make: "Maruti", model: "WagonR"}
];
for(var i = 0; i<vehicleData.length; i++){
//console.log(vehicleData[i]);
for( var i= 0; i<vehicleData.length; i++){
//console.log(vehicleData[i].year);
document.write(vehicleData[i].year + "</br>")
}
}
}
printIteration();
function buildDropdownYear(){
var yearSelect = document.getElementById("selectMe");
var drop1 = document.createElement("option");
yearSelect.appendChild(carYear);
var carYear = buildCtrl("data1","option");
}
buildDropdownYear();
function buildCtrl(data,ctrl){
var item = document.createElement(ctrl);
if(data){
item.innerHTML = data;
}
return item;
}
我是 javascript 的新手。我刚开始学习它,我有点被困在这里,因为我不知道错误是什么。控制台显示此错误:
TypeError: Argument 1 of Node.appendChild is not an object.
yearSelect.appendChild(carYear);
我的 plunker 是:http://plnkr.co/edit/fMufqCctzHe4Umbpu6Ag?p=preview
谁能告诉我我做错了什么?
最佳答案
您的代码中存在太多问题。
option
标签已经存在了,为什么还要创建它 在HTML
中?在HTML
或js
中添加它,但不能同时添加。也像其他人指出的那样,您正在尝试访问一个变量 甚至在它被定义之前。
我注意到的另一个问题是,您没有传递数据,那 需要附加,但只是一个字符串
data1
作为参数 你的功能。您应该在您的案例中传递vehicleData
数组。作为
document.write
的推荐替代方案,您可以使用 DOM 直接查询节点元素并将其添加到 DOM 的操作。尝试了解您正在尝试做什么。一步一个脚印。打破你的问题。你会到达那里。我已经 fork 了你的 Plunk 并对其进行了修改,以便将年份值添加到下拉列表中。您可以对其他下拉项执行相同的操作。
这是 Plunker .
也考虑一下评论区给出的建议
var vehicleData = [{year: 2015, make: "Audi", model: "A4"},
{year: 2014, make: "Benz", model: "c2000"},
{year: 2015, make: "Maruti", model: "s-cross"},
{year: 2015, make: "Maruti", model: "WagonR"}
];
for(var i = 0; i<vehicleData.length; i++){
buildDropdownYear(i);
}
function buildDropdownYear(k) {
var yearSelect = document.getElementById("selectMe");
var drop1 = document.createElement("option");
var carYear = buildCtrl(k, vehicleData,"option");
yearSelect.appendChild(carYear);
}
function buildCtrl(k, data,ctrl){
var item = document.createElement(ctrl);
if(data){
item.innerHTML = data[k].year;
}
return item;
}
如果我从新代码开始,我不会这样做。这里有很大的改进空间。
关于javascript - 值不在下拉列表中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36276151/