Change properties of div with JS

Question

Change properties of div with JS

Navigation

#1 by (1 votes)

0

I need that when selecting in the select with id='numplacas' the value 2 shows the div that is hidden , it is displayed, in the case that the value of the select is 1 that adds the class hidden to div with id='placa2'

$("#numplacas").change(function(){
            var e = document.getElementById("numplacas");
            var seleccion = e.options[e.selectedIndex].value;

            if (seleccion == 2) {
                $('#select2').removeClass('hidden')
            } else {
                $('#select2').addClass('hidden')
            }
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="row">
        <div style="width: 50%;margin:50px auto;float:none;">
            <label>Número de matrícula</label>
            <input type="text" class="form-control">
            <label>Número de bastidor</label>
            <input type="text" class="form-control">
            <label>Número de placas</label>
            <select class="form-control" id="numplacas">
                <option value="1">1</option>
                <option value="2">2</option>
            </select>
            <label>Selecciona tipo de placa</label>
            <select class="form-control" name="placa1">
                <option value="000">Selecciona una...</option>
                {% for placa in placas %}
                    <option value="{{ placa['codigo'] }}">{{ placa['nombre'] }}</option>
                {% endfor %}
            </select>
            <div id="placa2" class="hidden">
                <label>Selecciona tipo de placa para placa 2</label>
                <select class="form-control" name="placa2">
                    <option value="000">Selecciona una...</option>
                    {% for placa in placas %}
                        <option value="{{ placa['codigo'] }}">{{ placa['nombre'] }}</option>
                    {% endfor %}
                </select>
            </div>
        </div>
    </div>

javascript jquery html

asked by Pavlo B. 13.02.2018 в 17:25

source

1 answer

how to capture name and value of a select without javascript How can I know if the table exists

score 1 · Accepted Answer

What you should do is capture the value of the select#numplacas using the .val() method of jQuery , and then make the condition show / hide the select#placa2

Functional example:

$("#numplacas").change(function(){
            var valor = $(this).val();

            if (valor == 2) {
                $('#placa2').removeClass('hidden')
            } else {
                $('#placa2').addClass('hidden')
            }
        });

.hidden{
  display: none; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
        <div style="width: 50%;margin:50px auto;float:none;">
            <label>Número de matrícula</label>
            <input type="text" class="form-control">
            <label>Número de bastidor</label>
            <input type="text" class="form-control">
            <label>Número de placas</label>
            <select class="form-control" id="numplacas">
                <option value="1">1</option>
                <option value="2">2</option>
            </select>
            <label>Selecciona tipo de placa</label>
            <select class="form-control" name="placa1">
                <option value="000">Selecciona una...</option>
                {% for placa in placas %}
                    <option value="{{ placa['codigo'] }}">{{ placa['nombre'] }}</option>
                {% endfor %}
            </select>
            <div id="placa2" class="hidden">
                <label>Selecciona tipo de placa para placa 2</label>
                <select class="form-control" name="placa2">
                    <option value="000">Selecciona una...</option>
                    {% for placa in placas %}
                        <option value="{{ placa['codigo'] }}">{{ placa['nombre'] }}</option>
                    {% endfor %}
                </select>
            </div>
        </div>
    </div>