javascript - 如何根据用户输入为下拉列表提供值

Question

<select name = Colour id="Colour" onchange="check(this)"> <option value="Select Colour">Select platform</option> <option>red</option> <option>blue</option> <option>orange</option>
<option>purple</option>
<option>pink</option> </select> </tr> <td><label>Building</label></td> <td><label>factory</label></td> </tr> <tr> <td> <input type="text" name = "Building" id="Building" > <select id = "mass" style="display:none;"> </select></td> <td><input type ="text" name ="Factory" id ="Factory"> <select id = "Platforms" style="display:none;"></select></td> </tr> < /html> `

当用户单击某个下拉列表的值（例如红色）时，建筑物和工厂的值会更改为从文本框中下拉。请帮助我为建筑物和工厂下拉列表赋值。

标签： javascripthtmljsp

Answer 1

基本上，您正在寻找添加选项以动态选择列表。你可以使用javascript来做到这一点。

function check(s){
 var c= s.options[s.selectedIndex].value;
 const mass = document.querySelector("#mass");
 const building = document.querySelector("#building");
 
  if(c === "red") {
    mass.style.display = "block";
    building.style.display = "none";
    mass.innerHTML = "<option>option 1</option><option>option 2</option>";
  } else {
    mass.style.display = "none";
    building.style.display = "block";
    mass.innerHTML = "";
  }
}

#mass {
display: none;
}

<select onchange="check(this)">
 <option></option>
 <option>red</option>
 <option>yellow</option>
</select>
<input type="text" id="building" />
<select id="mass"></option>