Question

我正在尝试仅使用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>

Answer 1

删除或简单评论（将来可能会要求你）几行应该做你想做的事情：

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

使用上面的代码，您没有使用.split()，只是将整个对象分配给新元素。

Answer 2

将值保留为""以保持空白。

for(var option in optionArray){
   var text = optionArray[option];
   var newOption = document.createElement('option');
   newOption.value = "";
   newOption.innerHTML = text;
   s2.options.add(newOption, null);
}

Answer 3

你必须要知道，在数组上使用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 - 删除拆分方法

3 个答案: