javascript - 为依赖下拉列表填充标签时出现问题

Question

下拉菜单2的标签不可见，但通过浏览器中的检查元素检查时会填充其值。

    	    function populate(s1,s2)
    	    {
    		    var s1 = document.getElementById(s1);
    		    var s2 = document.getElementById(s2);		
    
        		s2.innerHTML = "";
    	    	if (s1.value == "Chevy") {
    			    var optionArray = ["|","chevy1|Chevy1","chevy2|Chevy2","chevy3|Chevy3"];
    		    } else if (s1.value == "Dodge") {
    			    var optionArray = ["|","dodge1|Dodge1","dodge2|Dodge2","dodge3|Dodge3"];
    		    } else if (s1.value == "Ford") {
    			    var optionArray = ["|","ford1|Ford1","ford2|Ford2","ford3|Ford3"];
    		    } 
    		    for (var option in optionArray) {
    			    var pair = optionArray[option].split("|");
    			    var newOption = document.createElement("option");
    			    newOption.value = pair[0];
    			    //alert(newOption.value);			
    			    newOption.InnerHTML = pair[1];
    			    s2.options.add(newOption); 
    		    }
    	   }

    <h2>Choose Your Car</h2>
    <hr/>
    <h2> Choose make car </h2>
    <select id="slct1" name="slct1" onchange="populate(this.id,'slct2')">
    	<option value=""></option>
    	<option value="Chevy">Chevy</option>
    	<option value="Dodge">Dodge</option>       
       	<option value="Ford">Ford</option> 
    </select>
    <hr/>
    <h2> Choose car model</h2>
    <select id="slct2" name="slct2"></select>
    <hr/>

期望的输出:

由于 id="slct2"的 dropdown2 取决于 dropdown1 的选择，因此所需的输出应该类似于如果我选择 dropdown1 的标签“Chevy”，则 dorpdown2 应该填充值“chevy1”、“chevy2”、“chevy3” ' 并受人尊敬的标签为“Chevy1”、“Chevy2”、“Chevy3”。

尽管在通过检查元素检查时，值正在填充，但标签不可见，这就是为什么当我单击 dropdown2 时出现空白列表。

Answer 1

就是这样(不要忘记将“DOMContentLoaded...”添加到您的代码中(此处的代码片段绕过它)

  const
    selCarBrand  = document.getElementById('Car-Brand'),
    selCarModel  = document.getElementById('Car-Model'),
    CarsModels   = {
      'Chevy': [ ['chevy1','Chevy1'], ['chevy2','Chevy2'], ['chevy3','Chevy3']],
      'Dodge': [ ['dodge1','Dodge1'], ['dodge2','Dodge2'], ['dodge3','Dodge3']],
      'Ford' : [ ['ford1','Ford1'],   ['ford2','Ford2'],   ['ford3','Ford3']]
    }
  ;
  
  selCarBrand.onchange = function()
  {
    selCarModel.innerHTML = null;
    if ('' != selCarBrand.value)
    {
      CarsModels[selCarBrand.value].forEach( function(pair,item)
      {
        selCarModel[item]= new Option(pair[0],pair[1]);
      })
    }
  }

<h2>Choose Your Car</h2>
<hr />
<h2> Choose make car</h2>
<select id="Car-Brand" >
  <option value=""></option>
  <option value="Chevy">Chevy</option>
  <option value="Dodge">Dodge</option>
  <option value="Ford">Ford</option>
</select>
<hr />
<h2> Choose car model</h2>
<select id="Car-Model" >
</select>
<hr />