0

Sou iniciante em trabalhar com JQuery, e estou com dificuldade em fazer um select dinâmico funcionar. Ao escolher no primeiro select um valor o segundo select deve exibir apenas os options com class terminados pelo valor selecionado no primeiro select. O mesmo esquema funciona no terceiro select em relação ao primeiro. Eu utilizei um script funcional, porem adaptá-lo ele perdeu a funcionalidade, mas ele está escrito mais ou menos como precisaria.

<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 com o código base.

3
  • acredito que deve have algumas instituições, muitos cursos e inumeras turmas. Neste tipo de cenario, é interresante você consultar os cursos e turmas disponiveis atraves de Ajax. Commented 9/02/2015 às 17:30
  • Acredito que sim @bfavaretto. Só que o sistema foi feito em ASP e com banco em Access, então apanhei quando tentei fazer o esquema com Ajax. Esse método da pergunta era pra ver se dava pra fazer de uma maneira alternativa sem perder em performance. Commented 9/02/2015 às 17:49
  • você tambem pode usar datalist para isto. neste caso você coloca na pagina todos os dl esperados, então só alterna eles. Commented 9/02/2015 às 17:55

2 Respostas 2

3

Este seu esquema de esconder os options por classes não me parece uma boa ideia. Como não sei exatamente o que você está fazendo não tenho como propor uma solução melhor.

Segue abaixo o código que funciona da forma como você descreveu:

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

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

Explicando:

O seletor ^= na linha

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

pega todos os option cuja classe começa com id_cur e esconde todos.

Na linha

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

val é o valor do option selecionado, logo .id_cur + val é a classe que corresponde aos options que você quer mostrar.

2

Como eu comentei em um comentario, tambem é possivel se fazer isto utilizando dataList, abaixo segue um exemplo:

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

http://jsfiddle.net/z42yktta/2/

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 .