我一直在想办法解决这个问题,但没有成功。
这里下面的代码工作正常。然而,在 jsfiddle在 HTML 文件中没有任何反应。
不知道有什么问题。谁能告诉我如何修复它?
function selectItems() {
var myDiv = document.getElementById("car-select");
var array = ["McLaren", "Ferrari", "Mercedes"];
var selectList = document.createElement("select");
selectList.setAttribute("id", "Car");
myDiv.appendChild(selectList);
for (var i = 0; i < array.length; i++) {
var option = document.createElement("option");
option.setAttribute("value", array[i]);
option.text = array[i];
selectList.appendChild(option);
}
var myDiv2 = document.getElementById("tyre-select");
var array2 = ["Bridgestone", "Michelin", "Continental"];
var selectList2 = document.createElement("select");
selectList2.setAttribute("id", "Eng");
myDiv2.appendChild(selectList2);
for (var i = 0; i < array2.length; i++) {
var option2 = document.createElement("option");
option2.setAttribute("value", array2[i]);
option2.text = array2[i];
selectList2.appendChild(option2);
}
}
<body class="car-showing" onload="selectItems()">
<div id="PPMCar">
<form method="post">
<ul>
<li class="engine-item">
<div class="engine-details-name">
<a class="race-team">Race Team</a>
<ul class="car-attributes">
<div id="car-select">
<li>#1:</li>
</div>
<div id="tyre-select">
<li>#2:</li>
</div>
</ul>
</div>
</li>
</ul>
</form>
</div>
</body>
最佳答案
您的代码对我来说工作得很好,而且 Michael Gaskill 的代码确实没有任何问题,我只是这样一个人,如果我看到相同的代码被多次实现,我会努力寻找一种不必重复自己的方法.
这种方式在我们的函数中声明了一个函数。生成的代码完成了同样的事情,但最终获得了一些描述并删除了大量冗余进程。
function selectItems() {
var fn = function(el,select_id, arr) {
var selectList = document.createElement("select");
selectList.setAttribute("id", select_id);
for (var i = 0; i < arr.length; i++) {
var option = document.createElement("option");
option.setAttribute("value", arr[i]);
option.text = arr[i];
selectList.appendChild(option);
}
el.appendChild(selectList);
};
var car_select = document.getElementById("car-select");
var car_brands = ["McLaren", "Ferrari", "Mercedes"];
fn(car_select, 'car', car_brands);
var tyre_select = document.getElementById("tyre-select");
var tyre_brands = ["Bridgestone", "Michelin", "Continental"];
fn(tyre_select, 'tyre', tyre_brands);
}
<body class="car-showing" onload="selectItems()">
<div id="PPMCar">
<form method="post">
<ul>
<li class="engine-item">
<div class="engine-details-name">
<a class="race-team">Race Team</a>
<ul class="car-attributes">
<div id="car-select">
<li>#1:</li>
</div>
<div id="tyre-select">
<li>#2:</li>
</div>
</ul>
</div>
</li>
</ul>
</form>
</div>
</body>
编辑
要谈谈我对 Gaskill 代码的评论,您可以使用 jQuery 来做到这一点,如果您正在使用它:
function selectItems() {
var create_select = function(parent, select_id, options) {
var select = $('<select />', {
id: select_id,
name: select_id
});
options = options.map(function(el, i) {
return $('<option />', {
value: el,
html: el
});
});
select.append(options).appendTo($(parent));
};
var car_select = $("#car-select");
var car_brands = ["McLaren", "Ferrari", "Mercedes"];
create_select(car_select, 'car', car_brands);
var tyre_select = document.getElementById("tyre-select");
var tyre_brands = ["Bridgestone", "Michelin", "Continental"];
create_select(tyre_select, 'tyre', tyre_brands);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body class="car-showing" onload="selectItems()">
<div id="PPMCar">
<form method="post">
<ul>
<li class="engine-item">
<div class="engine-details-name">
<a class="race-team">Race Team</a>
<ul class="car-attributes">
<div id="car-select">
<li>#1:</li>
</div>
<div id="tyre-select">
<li>#2:</li>
</div>
</ul>
</div>
</li>
</ul>
</form>
</div>
</body>
关于javascript - 在 Javascript 中设置选择,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37338174/