Create a hidden dropdown menu using remove & set attribute

Question

I am trying to have the latte flavor dropdown menu displayed when I select "latte," However, it is not appearing.

I would appreciate any suggestions

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>

You appear to have a mismatch of jQuery versus custom JavaScript. `var $ = function(id)` is very unusual code; are you trying to use jQuery? Because if so, you're overwriting it. If not, `$("coffeeType")` is not a valid selector. — Obsidian Age, Oct 08 '17 at 21:36
I am new to javaScript. I thought this was javascript. var $ = function(id) { return document.getElementById(id); }; — , Oct 08 '17 at 21:48

Tom O. · Accepted Answer · 2017-10-10T18:41:58.460

0

I think below achieves what you are trying to accomplish. I tried to simplify the code where possible.

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>

edited Oct 10 '17 at 18:41

answered Oct 10 '17 at 00:01

Tom O.

5,730
2
21
35

Thank you responding Tommy O. What I want is to have "Select Latte" menu hidden until I select "latte" on the first drop down menu. – Oct 10 '17 at 04:44
@user3006792 I updated my answer since I understand what you were looking for now. Your solution works but I think my code might be a little more straightforward, so I would recommend doing it like this. – Tom O. Oct 10 '17 at 14:31
@user3006792 Also I updated the code so that it the function fires on the select change event instead of the button click since that's what it looks like you want. – Tom O. Oct 10 '17 at 14:34
Thank you Tommy O. I appreciate your help. :) – Oct 10 '17 at 17:00
I forgot to delete the button click comment. Thank you again. – Oct 10 '17 at 17:06
Tommy O, I tested your code on JS Fiddle: https://jsfiddle.net/5mLa5mg6/ but the latte flavors menu is not showing up. – Oct 10 '17 at 17:50
1

Hey I updated the code. It should work in the fiddle. This thread explains what the issue was: https://stackoverflow.com/questions/5431351/inline-event-handler-not-working-in-jsfiddle . I changed the code to use `addEventListener` on the `select` elements instead of putting it in the `onchange` attribute in the HTML. – Tom O. Oct 10 '17 at 18:43
I prefer this: var coffeeType; var latteFlavors; rather than: var coffeeType = null; var latteFlavors = null; Thank you again. :) – Oct 10 '17 at 22:33

score 0 · Answer 2 · answered Oct 10 '17 at 06:33

I figured it out:

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/

Create a hidden dropdown menu using remove & set attribute

2 Answers2