Load checkbox from select

Navigation
1

Good morning!

I have the following 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:
                Features                                                          Touch screen                      Wi-Fi                      Bluetooth                                                            Flash                      Frontal camera                      GPS                                                            NFC Technology                      Memory Card Extension                                                   

I'm using the below JS to make the div appear, but I do not know how to specify it to appear only when I want. 

      <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>
    
asked by anonymous 02.03.2015 / 17:08

2 answers

0

Using jQuery, since it was pointed out that to use it: 

<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>

You can test here: link

    
02.03.2015 / 17:22
0

Just compare the valor_selecionado you got with the value you want, in this case 3. And in case of being the value, pass 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";
    }
});
    
02.03.2015 / 17:19
Route Post is not being recognized (Laravel) Loop While inside Ireport [closed]