我正在尝试仅使用 Javascipt 创建选择应用程序。我在互联网上了解了这段代码，它使用 split 方法返回值和 .innerHTML。现在说，如果我不想使用 split 方法，只是将 .innerHTML 返回到没有值的 html 元素中，如何使用此代码中使用的 for 循环来做到这一点？
<!DOCTYPE html>
<html>
<head>
<title>Select Options</title>
</head>
<body>
<h2>Choose your car</h2>
<hr>
Choose Car Make:
<select id="slct1" onchange="populate(this.id,'slct2')">
<option value=""></option>
<option value="Hyundai">Hyundai</option>
<option value="Honda">Honda</option>
<option value="Maruti">Maruti</option>
</select>
<hr>
Choose Car Model
<select id="slct2" ></select>
</body>
<script type="text/javascript">
function populate(s1,s2){
var s1 = document.getElementById(s1);
var s2 = document.getElementById(s2);
s2.innerHTML = "";
if(s1.value == "Hyundai") {
var optionArray = ["|", "i10|i10","i20|i20", "Verna|Verna"]
}
for(var option in optionArray){
var pair = optionArray[option].split("|");
var newOption = document.createElement('option');
newOption.value = pair[0];
newOption.innerHTML = pair[1];
s2.options.add(newOption);
}
}
</script>
</html>
最佳答案
您必须注意，在数组上使用 for...in 循环实际上不会返回元素，而是返回它们的索引。我建议您使用简单的 for 循环。
function populate(s1, s2) {
var s1 = document.getElementById(s1);
var s2 = document.getElementById(s2);
s2.innerHTML = "";
var optionArray = ["i10", "i20", "Verna"];
for (var i = 0; i < optionArray.length; i++) {
var newOption = document.createElement('option');
newOption.value = optionArray[i];
newOption.innerHTML = optionArray[i];
s2.appendChild(newOption);
}
}<h2>Choose your car</h2>
<hr> Choose Car Make:
<select id="slct1" onchange="populate('slct1','slct2')">
<option value=""></option>
<option value="Hyundai">Hyundai</option>
<option value="Honda">Honda</option>
<option value="Maruti">Maruti</option>
</select>
<hr> Choose Car Model
<select id="slct2"></select>关于Javascript - 删除 split 方法，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43158509/