1
Hello, I am working on an interactive menu, in which the user chooses a sandwich and in this act appears a certain list of breads for choice. However, when I select a bread option and then another one appears the bread options of the two combos. Follow the code. HTML
<select class="ped" id="ped" onchange="pao()">
<optgroup label="Tradicionais" id="pedido">
<option value="301">301 - Super Frango</option>
<option value="302">302 - Hamburguer</option>
<option value="303">303 - Precheseburguer</option>
<option value="304">304 - Eggs Burguer</option>
<option value="305">305 - Americano</option>
<option value="306">306 - Bauru</option>
<option value="307">307 - Misto</option>
<option value="308">308 - Queijo quente</option>
<option value="309">309 - Cachorro quente</option>
</optgroup>
<optgroup label="Linha especial">
<option value="310">310 - Sem noção</option>
<option value="311">311 - Bedegueba</option>
<option value="312">312 - Fortaleza</option>
<option value="313">313 - Ceará</option>
<option value="327">327 - TDB (Tudo de Bom)</option>
</optgroup>
</select>
Javascript
function pao(){
var sand = document.getElementById('ped');
var p1 = document.createElement('option');
var p2 = document.createElement('option');
var p3 = document.createElement('option');
if (sand.value == 301 || sand.value == 312 || sand.value == 313) {
p1.textContent = "Árabe";
p2.textContent = "Bolão";
opcpao.appendChild(p1);
opcpao.appendChild(p2);
sand.appendChild(opcpao);
} else if (sand.value == 302 || sand.value == 303 || sand.value == 304){
for (var i = 0; i < p1.length; i++) {
if (p1[i].innerHTMl == 'Árabe') {
p1.remove(i);
}
for (var i = 0; i < p2.length; i++) {
if(p2[i].innerHTMl == 'Bolão') {
p2.remove(i);
}
}
}
p1.textContent = "Árabe";
p2.textContent = "Bola"
opcpao.appendChild(p1);
opcpao.appendChild(p2);
sand.appendChild(opcpao);
}
document.body.appendChild(opcpao);
}
pao();
Thank you very much. :)
– Marcos Paulo S. Rezende