Erstellen Sie ein verstecktes Dropdown-Menü mit entfernen und setzen Attribut

Ich versuche, das Latte Flavor Dropdown-Menü angezeigt werden, wenn ich "Latte", aber es wird nicht angezeigt.Erstellen Sie ein verstecktes Dropdown-Menü mit entfernen und setzen Attribut

würde ich irgendwelche Vorschläge schätzen

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>

Quelle

2017-10-08 Anonymous

Sie scheinen eine Nichtübereinstimmung von jQuery im Vergleich zu benutzerdefinierten JavaScript zu haben. 'var $ = function (id)' ist ein sehr ungewöhnlicher Code; Versuchen Sie, jQuery zu verwenden? Wenn ja, überschreibst du es. Wenn nicht, ist '$ (" coffeeType ")' kein gültiger Selektor. –

Ich bin neu in JavaScript. Ich dachte, das wäre Javascript. var $ = Funktion (ID) { Rückgabe document.getElementById (id); }; –

'showLatte(); // ruft die Funktion auf - äh ... – melpomene

Ich denke, erreicht unter dem, was Sie versuchen zu erreichen. Ich habe versucht, den Code soweit wie möglich zu vereinfachen.

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>

Quelle

2017-10-10 00:01:29 tommyO

Danke Antwort Tommy O. Was ich will, ist "Select Latte" Menü ausgeblendet, bis ich "Latte" im ersten Dropdown-Menü auswählen. –

@ user3006792 Ich habe meine Antwort aktualisiert, da ich jetzt verstehe, wonach Sie gesucht haben. Ihre Lösung funktioniert, aber ich denke, dass mein Code etwas einfacher ist, also würde ich empfehlen, es so zu machen. – tommyO

@ user3006792 Auch habe ich den Code aktualisiert, so dass es die Funktion ausgelöst wird auf der Auswahl ändern Ereignis anstelle der Schaltfläche klicken, da das ist, was es so aussieht wie Sie wollen. – tommyO

ich es herausgefunden:

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/

Quelle

2017-10-10 06:33:53

Erstellen Sie ein verstecktes Dropdown-Menü mit entfernen und setzen Attribut

Antwort

Verwandte Themen