带有onchange的Java动态下拉菜单

Posted 2021-04-12

我对javascript非常陌生。我正在尝试创建动态的下拉列表，即当您在第一个下拉列表中选择一个值时，第二个下拉列表会自动更新所选值的所有可能值，反之亦然。

我能够以一种方式来做，但不能以另一种方式来做。请在附件中找到我的代码here的屏幕截图。我将不胜感激。谢谢。

function populate(s1,s2){
  var s1 = document.getElementById(s1);
  var s2 = document.getElementById(s2);
  if (s1.value!=""){
    if (s1.value!=""){
      s2.innerhtml=""
    } else {
      s1.innerHTML=""
    }
    if(s1.value == "Chevy"){
      var optionArray = ["|","Camaro|Camaro","Corvette|Corvette","Impala|Impala"];
    } else if(s1.value == "Dodge"){
      var optionArray = ["|","Avenger|Avenger","Challenger|Challenger","Charger|Charger"];
    } else if(s1.value == "Ford"){
      var optionArray = ["|","Mustang|Mustang","Shelby|Shelby"];
    } 
    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);
    }

  }
  if(s2.value == "Camaro" || s2.value=="Corvette"|| s2.value=="Impala"){
    var optionArray1 = ["|","Chevy|Chevy"];
  } else if(s2.value == "Avenger" || s2.value=="Challenger"|| s2.value=="ImpChargerala"){
    var optionArray1 = ["|","Dodge|Dodge"];
  } else if(s2.value == "Mustang" || s2.value=="MuShelby"){
    var optionArray1 = ["|","Dodge|Dodge"];
  }
  for(var option in optionArray1){
    var pair = optionArray[option].split("|");
    var newOption = document.createElement("option");
    newOption.value = pair[0];
    newOption.innerHTML = pair[1];
    s1.options.add(newOption);
  }
}

<h2>Choose Your Car</h2>
<hr />
Choose Car Make:
<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 />
Choose Car Model:
<select id="slct2" name="slct2">
  <option value=""></option>
  <option value="Camaro">Camaro</option>
  <option value="Corvette">Dodge</option>
  <option value="Impala">Impala</option>
  <option value="Avenger">Avenger</option>
  <option value="Corvette">Dodge</option>
  <option value="Challenger">Challenger</option>
  <option value="Charger">Charger</option>
  <option value="Mustang">Mustang</option>
  <option value="Shelby">Shelby</option>
</select>
<hr />

答案

此代码可能更短，但我想更清楚一些。 （有关几乎所有JS功能的更多信息，MDN是一个很好的来源。您可以在Google网站上搜索该功能的名称和MDN（例如“ Arrays MDN”），以在该网站上找到结果。）

const // Identifies HTML elements in the DOM that we will need makesDropdown = document.getElementById("makesDropdown"), modelsDropdown = document.getElementById("modelsDropdown"), // Puts Makes and Models in a `cars` object for reference cars = { Chevy: ["Camaro", "Corvette", "Impala"], Dodge: ["Avenger", "Challenger", "Charger"], Ford: ["Mustang", "Shelby"] } ; // Calls the appropriate function when a selection changes makesDropdown.addEventListener("change", updateModelsDropdown); modelsDropdown.addEventListener("change", updateMakesDropdown); // Defines listener functions function updateModelsDropdown(event){ let // The "target" of the `change` event is the input that changed thisMake = event.target.value, // Gets the array of models from `cars` (If no make is selected, uses all models) relevantModels = cars[thisMake] || getAllModels(); modelsDropdown.selectedIndex = 0; // Shows the first (blank) option // The select element's children are the options let optionElements = modelsDropdown.children; for(let option of optionElements){ // Uses CSS to hide (or unhide) HTML elements option.classList.add("hidden"); // Keeps the blank option as well as the ones included in the array if(relevantModels.includes(option.value) || option.value === ""){ option.classList.remove("hidden"); } } } function updateMakesDropdown(event){ let thisModel = event.target.value, relevantMake = "", // Gets an array of the "keys" for an object allMakes = Object.keys(cars); // Loops through the keys and tests each corresponding value (ie, each array of models) for(let make of allMakes){ let models = cars[make]; // Finds the key whose value includes the selected model if(models.includes(thisModel)){ // Saves the name of the key so we can select it in the makesDropdown relevantMake = make; } } let optionElements = makesDropdown.children; for(let i = 0; i < optionElements.length; i++){ // Finds the index of the matching value if(relevantMake === optionElements[i].value){ // Selects the option by its index makesDropdown.selectedIndex = i; } } } // Defines a helper function function getAllModels(){ // Gets an array of the "keys" for an object const makes = Object.keys(cars); const models = []; // Starts with an empty array to push models into for(let make of makes){ // `cars[make]` retrieves the value (array of models) for that key // `...` spreads the array into individual values (models) // `push` adds each model to the new `models` array models.push(...cars[make]); } return models; }

.hidden{ display: none; }

<hr />
<h2>Choose Your Car</h2>
<hr /> Choose Car Make:
<select id="makesDropdown">
  <option value=""></option>
  <option value="Chevy">Chevy</option>
  <option value="Dodge">Dodge</option>
  <option value="Ford">Ford</option>
</select>
<hr /> Choose Car Model:
<select id="modelsDropdown">
  <option value=""></option>
  <option value="Camaro">Camaro</option>
  <option value="Corvette">Corvette</option>
  <option value="Impala">Impala</option>
  <option value="Avenger">Avenger</option>
  <option value="Challenger">Challenger</option>
  <option value="Charger">Charger</option>
  <option value="Mustang">Mustang</option>
  <option value="Shelby">Shelby</option>
</select>

以上是关于带有onchange的Java动态下拉菜单的主要内容，如果未能解决你的问题，请参考以下文章

Onchange下拉值查询resp。表 - 带有 php 、 mysql 、 ajax 、 jquery

强制触发选择下拉菜单的 onChange

easyui中的下拉菜单是树形结构时如何实现onchange方法

React-select 多个下拉 onChange 实现

onchange = "Form.submit() 仅适用于我的下拉菜单中的第一个子下拉菜单

带有 jQ​​uery 的 Rails 中的动态下拉（选择框）菜单不可逆