Load checkbox from select

Question

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:

Characteristics Touch Screen Wi-fi Bluetooth Flash Frontal Camera GPS NFC technology Extension for Memory Card

I am using the JS below to make appear the div, but do not know how to specify 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>

Answer 1

Just compare the valor_selecionado which you get with the value you want, in this case 3. And in case it is the value, pass the 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";
    }
});

Answer 2

Using jQuery, since it was pointed out that the use of 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: http://jsfiddle.net/vvam97jn/1/