1

Bom dia!

Tenho o seguinte select:

 <select name="category" class="form-control" id="categorias">
                    <option value="">Escolha uma categoria</option>
                    <optgroup label="Vehicle">
                    <option value="2">Aircraft</option>
                    <option value="3">Automotive Items &amp; Parts</option>
                    <option value="4">Boats &amp; Watercraft</option>
                    <option value="5">Cars</option>
                    <option value="6">Classic Cars</option>
                    <option value="7">Commercial Trucks &amp; Tractor Trailers</option>
                    <option value="8">Off Road Vehicles</option>
                    <option value="9">RV &amp; Motorhomes</option>
                    <option value="10">SUVs</option>
                    <option value="11">Utility &amp; Work Trailers</option>
                    <option value="12">Vans</option>
                    </optgroup>
                    <optgroup label="Sevices">
                    <option value="2">Automotive Services</option>
                    <option value="3">Beauty & Salon Services</option>
                    <option value="4">Caregivers & Baby Sitting</option>
                    <option value="5">Cleaning Services</option>
                    <option value="6">Construction & Remodeling</option>
                    <option value="7">Financial Services</option>
                    <option value="8">Health & Wellness</option>
                    <option value="9">Home Services</option>
                    <option value="10">Insurance</option>
                    <option value="11">Office Services</option>
                    <option value="12">Real Estate Services</option>
                    </optgroup>
                    <optgroup label="Pets">
                    <option value="2">Birds</option>
                    <option value="3">Cats</option>
                    <option value="4">Dogs</option>
                    <option value="5">Fish & Reptile Pets</option>
                    <option value="6">Free Pets to Good Home</option>
                    <option value="7">Horses</option>
                    <option value="8">Pet Supplies</option>
                    </optgroup>
                  </select>

Queria carregar a div abaixo a partir do select de option value 3 por exemplo:
Características Touch Screen Wi-fi Bluetooth Flash Câmera Frontal GPS Tecnologia NFC Extensão para Cartão de Memória

Estou usando o JS abaixo para fazer aparecer a div, mas não sei como especificar pra aparecer somente quando eu quero.

      <script>
// Selecionamos o menu dropdown, que possui os valores possíveis:
var menu_dropdown = document.getElementById("categorias");

// Requisitamos que a função handler (que copia o valor selecionado para a caixa de texto) [...]
// [...] seja executada cada vez que o valor do menu dropdown mude:
menu_dropdown.addEventListener("change", function(){

    // Como este código é executado após cada alteração, sempre obtemos o valor atualizado:
    var valor_selecionado = menu_dropdown.options[menu_dropdown.selectedIndex].value;

    // Altere este código se desejar resultados mais complexos:
    if(valor_selecionado){
        document.getElementById("div_personalizar").style.visibility = "";
    } else {
        document.getElementById("div_personalizar").style.visibility = "hidden";
    }

});
</script>
0

2 Respostas 2

0

Utilizando jQuery, já que foi apontado que à o uso dele:

<script>
$("#div_personalizar").hide();

$('#categorias').change(function(){
    var valor = $(this).val();
    if(valor){
        if(valor == 1 || valor == 2 || valor == 3){
            $("#div_personalizar").show();
        }
    }else{
        $("#div_personalizar").hide();
    }
});
</script>

Você pode testar aqui: http://jsfiddle.net/vvam97jn/1/

4
  • Entendi Francisco, mas e como eu faço pra abrir somente se a categoria X for selecionada? Commented 2/03/2015 às 16:46
  • 1
    Alterado o código para escolher as categorias. Commented 2/03/2015 às 16:49
  • Francisco, funcionou corretamente, mais uma dúvida só, se eu fizer a listagem das categorias dinamicamente, vindo o option value do BD, eu consigo tratar os ifs dinamicamente também? Por nome da categoria talvez? Desculpa não estar testando agora, é que estou em meu trabalho. Novamente obrigado pela sua ajuda. Commented 2/03/2015 às 17:44
  • Sim, é possível, você pode fazer de várias formas isso. Criar o javascript pelo backend, ou criar uma array pelo backend e enviar para o javascript. Também pode fazer por Ajax a verificação e só enviar para a div o código necessário. Commented 2/03/2015 às 18:58
0

Basta comparar o valor_selecionado que você obteu com o valor que deseja, neste caso 3. E em caso de ser o valor, passar o visibility = visible

// Selecionamos o menu dropdown, que possui os valores possíveis:
var menu_dropdown = document.getElementById("categorias");

// Requisitamos que a função handler (que copia o valor selecionado para a caixa de texto) [...]
// [...] seja executada cada vez que o valor do menu dropdown mude:
menu_dropdown.addEventListener("change", function(){
    // Como este código é executado após cada alteração, sempre obtemos o valor atualizado:
    var valor_selecionado = this.options[this.selectedIndex].value;

    // Altere este código se desejar resultados mais complexos:
    if(valor_selecionado == 3){
        document.getElementById("div_personalizar").style.visibility = "visible";
    } else {
        document.getElementById("div_personalizar").style.visibility = "hidden";
    }
});
1
  • Luis, muito obrigado pela ajuda. Commented 2/03/2015 às 17:41

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 .