Duvidas em como usar JS em Select Box

[icarof 9]

Olá Caros amigos

 

tenho a seguinte duvida: Gostaria que quando eu selecionasse um determinado item em uma combobox com base nessa seleção ela fornecesse uma lista de itens que não estejam dentro de outra combo, tipo

<label>Selecione a Categoria</label><br />
<select name="categorias" id="a" rel"a">
        <option>Selecione a Opção</option>
        <option value="1">Bebidas</option>
        <option value="2">Lanches</option>
      </select>

quando eu selecionasse bebida, me mostrasse a lista de bebidas em baixo.

 

Sou leigo nessa area, mas conto com vossa ajuda

[Klaider 5]

Para deixar claro, cada elemento com nome de tag `select` pode ter o evento onchange que ocorre quando uma opção selecionada e, para saber qual opção foi selecionada você deve usar o identificador (propriedade) value do elemento do documento.

 

Tente fazer isso só para ter uma ideia, mas não é elegante deixar em linha.

<select name="categorias" id="a" rel"a" onchange="alert('Valor: '+this.value)">
  <option>Selecione a Opção</option>
  <option value="1">Bebidas</option>
  <option value="2">Lanches</option>
</select>

Então quando você muda a opção selecionada, é alertada a nova opção selecionada da função atribuída para o evento (propriedade) onchange.

 

Em qualquer callback de um evento de um elemento você usar this. this vai retornar o elemento do evento.

 

Eu creio que é isso que você quer fazer, certamente:

//JavaScript

//Atribuição de variável, seu identificador é "Selector"
var Selector={//Objeto (JSON)
    "Category":{//Objeto (JSON), propriedade de "Selector". Identificador: Category
        "Option":null//Opcional. Boolean (null). Identificador: Option
    }
};

/*
 * Chama a função addEventListener, que adiciona função para eventos da página;
 * Isso é equivalente à: window.addEventListener
 * addEventListener é uma propriedade de window;
 * Essa não é a única maneira de adicionar evento - você pode escolher por propriedade;
 * Você pode definir uma função para a propriedade onload ao invés de chamar
 * addEventListener; Ex: onload=function(){alert("A página carregou!")}
 * onload é uma propriedade de window; Você também pode referir assim: window.onload
 * Quando for para definir o nome do evento em addEventListener, ignore o "on",
 * se não ele não irá ser reconhecido.
*/
addEventListener("load",function(){//Evento arremessado quando a página carrega
    //O primeiro argumento DEVE ser uma string com o nome do evento;
    //O segundo argumento DEVE ser uma função (callback);
    //Você sempre tem que esperar a página carregar para fazer modificações no DOM ou nos ELEMENTOS.
    //Selector.Category.Option vai ser definido como seu selector;
    Selector.Category.Option=document.getElementById("a");
    //PS:: não é elegante usar IDs;

    //Aqui vai ser definido o evento "onchange" para seu selector;
    //PS: pode ser usado addEventListener nele assim: Selector.Category.Option.addEventListener(...)
    Selector.Category.Option.onchange=function(){
        //Por favor, faça uma base para o listeamento.
        //PS: você pode usar this aqui se quiser;
        //OBS: this vai referir à outro objeto se for declarado em loops, switch, funções, etc.
        //OBS²: this ainda vai continuar referindo ao elemento se passar por ifs, else if, else, básicos.
        //À continuar...
    }
})

 

[icarof 9]

Vlw, ajudou demais :D