javascript - 值不在下拉列表中

标签 javascript html css

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 中?在 HTMLjs 中添加它,但不能同时添加。

  • 也像其他人指出的那样,您正在尝试访问一个变量 甚至在它被定义之前。

  • 我注意到的另一个问题是,您没有传递数据,那 需要附加,但只是一个字符串 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/

相关文章:

javascript - 如何在 Javascript 中使用 window.open 将值从子窗口返回到父窗口?

javascript - 如何在 JavaScript 中将一个页面的 css 样式更新到另一个页面

javascript - 如何将html5输入按钮转换为div标签?

html - Flexbox 是否有溢出控制之类的东西?

css - 我有一个缩放栏和一个图例。我想将元素彼此右对齐以及页面移动时

javascript - 需要在javascript中保留空格

javascript - jQuery 按标题选择查询

javascript - 按照路线在谷歌地图上画线

jquery - 如何使用 css 和 jquery 组织 50 个或更多 html 表单?

html - 尽管内容长度不同,但 jQueryUI 按钮的大小相同