remove＆set属性を使用して非表示のドロップダウンメニューを作成する

Question

"latte"を選択したときに、latte flavorドロップダウンメニューを表示しようとしていますが、表示されません。

私は、私は以下のだと思うか提案

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

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

をいただければ幸いですが、あなたが達成しようとしているものを実現しています。私は可能な限りコードを簡素化しようとしました。

EDIT：

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