Question

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);

我的傻瓜是：http://plnkr.co/edit/fMufqCctzHe4Umbpu6Ag?p=preview

有谁能告诉我我做错了什么？

Answer 1

您的代码中存在太多问题。

为什么要在option标记已经存在时创建它在HTML？在HTML或js中添加，而不是两者都添加。
与其他人指出的一样，您正在尝试访问变量甚至在定义之前。
我注意到的另一个问题是，你没有传递数据需要追加，但只需要一个字符串data1作为参数你的功能。您应该在您的情况下传递vehicleData数组。
作为document.write的推荐替代品，您可以使用DOM 操作直接查询并向DOM添加节点元素。

尝试了解您要做的事情。一步一步。打破你的问题。你会到达那里。我已经分叉了你的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;
}

我不会这样做，如果我开始使用新代码。这里有很多改进的余地。

Answer 2

yearSelect.appendChild(carYear); carYear未初始化。

var carYear = buildCtrl("data1","option");应该在上面一行之前。

Plunker

价值观没有进入下拉列表

2 个答案: