1

Olá, estou trabalhando em um cardápio interativo, no qual o usuário escolhe um sanduíche e nesse ato aparece uma determinada lista de pães para escolha. Contudo, quando eu seleciono uma opção de pão e em seguida outra aparece as opções de pães dos dois combos. Segue o código. 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();

2 Respostas 2

2

Você pode verificar se o elemento já existe antes de adicionar na página. Para isso (e facilitar), sugiro colocar uma id no elemento adicionado, como por exemplo, id="paes":

var opcpao = document.createElement('select'); // faltou incluir essa linha no código
opcpao.id = "paes";

E você pode verificar se o elemento existe com:

if(document.body.querySelector("#paes")){
  document.body.querySelector("#paes").outerHTML = ''; // se existe, apaga
}

Logo, o código ficaria assim:

function pao(){

   if(document.body.querySelector("#paes")){
       document.body.querySelector("#paes").outerHTML = '';
   }


   var sand = document.getElementById('ped');
   var opcpao = document.createElement('select');
   opcpao.id = "paes";
   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();
<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>

1
1

Tenta algo assim, talvez te ajude:

var myDiv = document.getElementById("myDiv");
var array = ["pao1","pao2","pao3","pao4"];

var selectList = document.createElement("select");
selectList.id = "mySelect";
myDiv.appendChild(selectList);

for(var i = 0; i < array.length; i++){
    var option = document.createElement("option");
    option.value = array[i];
    option.text = array[i];
    selectList.appendChild(option);
}

var mySelect = document.getElementById("mySelect");
mySelect.addEventListener("change", function(){
    var selindex  = this.selectedIndex;
    var value  = this.value;
    var index  = this.index;

    for(var i=0; i <= this.length; i++){
        if(value != this[i].value){
            this.options.remove(i);
        }
    }
});
4
  • O que eu não entendi é que as opções de pães nunca vão serem removidas. 24/04/2018 às 23:21
  • é para remover todos as outras opções de pães após escolher uma, é isso? 24/04/2018 às 23:27
  • Exatamente isso 25/04/2018 às 11:51
  • editei minha resposta, vê se agora te ajuda. 25/04/2018 às 12:33

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .