Select dynamic with JQuery

Question

Select dynamic with JQuery

Navigation

#1 by (3 votes)
#2 by (2 votes)

0

I'm a beginner in working with JQuery, and I'm having a hard time making a% dynamic% working. When choosing the first select a value the second select should only display the select with options terminated by the value selected in the first class . The same schema works on the third select in relation to the first. I used a functional script, but to adapt it it lost functionality, but it is written more or less as you would need it.

<div class="form-group">
    <label class="col-sm-3 control-label">Instituição</label>
    <div class="col-sm-6">
        <select name="instituicao_tur" required="required" class="form-control" id="instituicao_tur">
            <option value="0">Selecione</option>
            <option value="1"/>Instituição 1
            <option value="2"/>Instituição 2
            <option value="3"/>Instituição 3
        </select>
    </div>
</div>

$(document).ready(function() {
   $('#instituicao_tur').change(function() {
        if ($(this).val() == "0") {
            $('.curso_zero').hide();
        }
    });

    $('#instituicao_tur').change(function() {
        if ($(this).val() == '1') {
            $('.id_cur1').show();
        }
    });

    $('#instituicao_tur').change(function() {
        if ($(this).val() == '2') {

            $('.id_cur2').show();
        }
    });

    $('#instituicao_tur').change(function() {
        if ($(this).val() == '3') {

            $('.id_cur3').show();
        }
    });
    });
});

jSFiddle with the base code.

jquery

asked by anonymous 09.02.2015 / 18:16

2 answers

2

As I commented in a comment, it is also possible to do this using dataList, Here is an example:

HTML

<div>
    <label for="inst">Instituição</label>
    <input id="inst" type="text" list="_000"></input>
</div>

<div>
    <label for="curso">Curso</label>
    <input id="curso" type="text"></input>
</div>

<div>
    <label for="nucleo">Nucleo</label>
    <input id="nucleo" type="text"></input>
</div>

<datalist id="_000">
    <option value="Instituicão 100" data-value="100" />
    <option value="Instituicão 200" data-value="200" />
    <option value="Instituicão 300" data-value="300" />
</datalist>

<datalist id="_100">
    <option value="Curso 110" data-value="110" />
    <option value="Curso 120" data-value="120" />
</datalist>

<datalist id="_200">
    <option value="Curso 210" data-value="210" />
    <option value="Curso 220" data-value="220" />
</datalist>

<datalist id="_300">
    <option value="Curso 310" data-value="310" />
    <option value="Curso 320" data-value="320" />
</datalist>

<datalist id="_110">
    <option value="Nucleo 111" data-value="111" />
    <option value="Nucleo 112" data-value="112" />
</datalist>

<datalist id="_120">
    <option value="Nucleo 121" data-value="121" />
    <option value="Nucleo 122" data-value="122" />
</datalist>

<datalist id="_210">
    <option value="Nucleo 211" data-value="211" />
    <option value="Nucleo 212" data-value="212" />
</datalist>

<datalist id="_220">
    <option value="Nucleo 221" data-value="221" />
    <option value="Nucleo 222" data-value="222" />
</datalist>

<datalist id="_310">
    <option value="Nucleo 311" data-value="311" />
    <option value="Nucleo 312" data-value="312" />
</datalist>

<datalist id="_320">
    <option value="Nucleo 321" data-value="321" />
    <option value="Nucleo 322" data-value="322" />
</datalist>

JS

var inst = $("#inst");
var curso = $("#curso");
var nucleo = $("#nucleo");

inst.bind("input", function () {
    curso.val("");
    nucleo.val("");
    nucleo.attr("list", null)

    var option = $(inst.prop("list")).find("option[value='" + inst.val() + "']");
    if (option != null && option.length > 0) {
        curso.attr("list", "_" + option.attr("data-value"));
    } else {        
        curso.attr("list", null)
    }
});

curso.bind("input", function () {
    nucleo.val("");
    var option = $(curso.prop("list")).find("option[value='" + curso.val() + "']");
    if (option != null && option.length > 0) {
        nucleo.attr("list", "_" + option.attr("data-value"));
    } else {        
        nucleo.attr("list", null)
    }
});

JSFIDDLE

link

09.02.2015 / 19:14

Eclipse deleted all my project Make animate with scrollTop

score 3 · Accepted Answer

This scheme of hiding the options by classes does not seem like a good idea to me. Since I do not know exactly what you are doing, I can not propose a better solution.

Below is the code that works the way you described it:

  $(document).ready(function() {
     $('#instituicao_tur').change(function() {
         $('option[class^="id_cur"]').hide();
         
         var val = $(this).val();
          if (val == 0) {
              $('.curso_zero').hide();
          } else {
              $('.id_cur'+val).show();
          }
      });
      
     $('#curso_tur').change(function() {
         $('option[class^="id_polo"]').hide();
         $('.id_polo'+$(this).val()).show();
      });  
});

#curso_tur option, #polo_tur option{display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="form-group">
    <label class="col-sm-3 control-label">Instituição</label>
    <div class="col-sm-6">
        <select name="instituicao_tur" required="required" class="form-control" id="instituicao_tur">
            <option value="0">Selecione</option>
            <option value="1"/>Instituição 1
            <option value="2"/>Instituição 2
            <option value="3"/>Instituição 3
        </select>
    </div>
</div>

<div class="form-group">
    <label class="col-sm-3 control-label">Curso</label>
    <div class="col-sm-6">
        <select name="curso_tur" required="required" class="form-control" id="curso_tur">
            <option class="curso_zero" value="">Selecione</option>
            <option class="id_cur1" value="1"/>Curso 1
            <option class="id_cur2" value="2"/>Curso 2
            <option class="id_cur3" value="3"/>Curso 3
        </select>
    </div>
</div>

<div class="form-group">
    <label class="col-sm-3 control-label">Núcleo</label>
    <div class="col-sm-6">
        <select name="polo_tur" required="required" class="form-control" id="polo_tur">
            <option value="polo_zero">Selecione</option>
            <option value="1" class="id_polo1"/>Nucleo 1
            <option value="2" class="id_polo2"/>Nucleo 2
            <option value="3" class="id_polo3"/>Nucleo 3
        </select>
    </div>
</div>

Explaining:

The ^= selector on the line

$('option[class^="id_cur"]');

get all option whose class starts with id_cur and hides all.

On line

$('.id_cur'+val).show();

val is the value of option selected, so .id_cur + val is the class that corresponds to options you want to display.