使用 remove & set 属性创建一个隐藏的下拉菜单

Question

我试图在 select "latte," 时显示拿铁风味下拉菜单，但是，它没有出现。

如有任何建议，我将不胜感激

var $ = function(id) {
return document.getElementById(id);
}; 

function init() { 
var allSelect = document.getElementsByTagName("select");
// onchange event for all selects coffeeType, coffeeSize, latteType
for (var i = 0; i < allSelect.length; i++)
{
allSelect[i].onchange = showLatte(); // calls function

}
}

var coffee = $("coffeeType").value;

function showLatte() {
switch(coffee) { 
case "Latte":
if (latteFlavors.hasAttribute("class")) { 
latteFlavors.removeAttribute("class");
} else {
latteFlavors.setAttribute("class", "showLatteFlavors");
}
}
};

<select name="coffeeType" id="coffeeType">
<option value="#">Select Coffee</option>
<option value="Hazelnut">Hazelnut</option>
<option value="Decaf">Decaf</option>
<option value="Reg">Regular</option>
<option value="Americano">Americano</option>
<option value="Latte">Latte</option>
</select>

<select name="latteFlavors" id="latteFlavors">
<option value="#">Select Latte</option>
<option value="mocha">Mocha</option>
<option value="chai">Chai</option>
<option value="pumpkin">Pumpkin</option>
<option value="macchiato">Macchiato</option>
</select>

Answer 1

我认为下面实现了您想要实现的目标。我尽量简化代码。

编辑：

//gloabals will be set in init
var coffeeType = null;
var latteFlavors = null;
init();

function showLatte(coffeeType) {
  if (coffeeType === "Latte") {
    latteFlavors.style.display = 'inline';
  } else {
    latteFlavors.style.display = 'none';
  }
}

function init() {
  coffeeType = document.getElementById('coffeeType');
  latteFlavors = document.getElementById('latteFlavors');
  latteFlavors.style.display = 'none';
  coffeeType.addEventListener('change', function() {
    showLatte(coffeeType.value);
  });
}

<select name="coffeeType" id="coffeeType">
  <option value="#">Select Coffee</option>
  <option value="Hazelnut">Hazelnut</option>
  <option value="Decaf">Decaf</option>
  <option value="Reg">Regular</option>
  <option value="Americano">Americano</option>
  <option value="Latte">Latte</option>
</select>

<select name="latteFlavors" id="latteFlavors">
  <option value="#">Select Latte</option>
  <option value="mocha">Mocha</option>
  <option value="chai">Chai</option>
  <option value="pumpkin">Pumpkin</option>
  <option value="macchiato">Macchiato</option>
</select>

Answer 2

我想通了：

CSS:

#latteFlavors.showLatteFlavors {
display: block;
}

#latteFlavors {
display: none;
}

HTML:

<select name="coffeeType" id="coffeeType">
<option value="#">Select Coffee</option>
<option value="Hazelnut">Hazelnut</option>
<option value="Decaf">Decaf</option>
<option value="Reg">Regular</option>
<option value="Americano">Americano</option>
<option value="Latte">Latte</option>
</select>
<br>
<br>
<select name="latteFlavors" id="latteFlavors">
<option value="#">Select Latte</option>
<option value="mocha">Mocha</option>
<option value="chai">Chai</option>
<option value="pumpkin">Pumpkin</option>
<option value="macchiato">Macchiato</option>
</select>

JS:

var $ = function(id) {
return document.getElementById(id);
}; 


function init() { 
var allSelect = document.getElementsByTagName("select");
// onchange event for all selects coffeeType, coffeeSize, latteType
for (var i = 0; i < allSelect.length; i++)
{
allSelect[i].onchange = showLatte; // calls function
}
}

var coffee = $("coffeeType").value;
// displays latte type dropdown menu if latte is selected

var showLatte = function() {
var latteFlavors = $("latteFlavors");
var coffee = $("coffeeType").value;

if (coffee == "Latte") { 
        latteFlavors.setAttribute("class", "showLatteFlavors");
} else {
        latteFlavors.removeAttribute("class"); 
}
};

window.onload = function() {
init(); // calls function

}

https://jsfiddle.net/1ce4xm4h/15/

使用 remove & set 属性创建一个隐藏的下拉菜单

Create a hidden dropdown menu using remove & set attribute

javascript

setattribute