我一直试图找出如何徒劳地解决此问题的方法。
在这里下面的代码工作正常。但是,在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,可以使用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 - 在Java中设置“选择”,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/37338174/