4

Quero alterar outra seleção quando uma seleção é acionada. Estou usando o JQuery Chosen.

Exemplo com JQuery puro aqui

No momento eu tenho feito:

<form method="post" id="form">
  <div class="row justify-content-center">
    <div class="col-md-4">
      <div class="form-group">
        <select name="categories" class="chosen-select" id="categories">
          <option value=""></option>
          <option value="câmera">câmera</option>
          <option value="celular">Celular</option>
          <option value="computador">Computador</option>
        </select>
      </div>
    </div>
    <div class="col-md-4">
      <div class="form-group">
        <select name="equipments" class="chosen-select" id="equipments">
          <option value=""></option>
          <option value="GoPro">GoPro</option>
          <option value="Samsung A10">Samsung A10</option>
          <option value="Notebook">Notebook</option>
        </select>
      </div>
    </div>
  </div>
</form>

JS:

$(document).ready(function () {
    var categories = $("select[name=categories]")
    var equipments = $("select[name=equipments]")

    categories.chosen()
    $(document).on("click", ".active-result", function () {
        $("#equipments_chosen .result-selected").attr("data-name", $(this).text())
    })

})

Como posso fazer isso?

3
  • Neste exemplo em particular você quer fazer o que ? Selecionar um equipamento sempre que é selecionada uma categoria ? E se sim qual é a regra ?
    – Isac
    12/12/2019 às 23:32
  • Exatamente isso. A regra é igual ao do exemplo. Só que com JQuery Chosen não da pra recurar o valor do select. 13/12/2019 às 1:31
  • Resumindo: O JQuery Chosen adiciona um link e um span em cima do option ao que me parece. 13/12/2019 às 1:33

1 Resposta 1

3

O que você quer fazer apenas com JS e HTML puro é bem simples, mas o facto de usar a biblioteca Chosen complica um pouco. Para fazer com que a seleção de um elemento num <select> se manifeste na página precisa de dar uma chamada especial no plugin para atualizar o componente com:

oSeuSelect.trigger("chosen:updated");

Isso é algo que a própria documentação evidencia.

Excerto relevante da documentação:

Updating Chosen Dynamically
If you need to update the options in your select field and want Chosen to pick up the changes, you'll need to trigger the "chosen:updated" event on the field. Chosen will re-build itself based on the updated content.

$("#form_field").trigger("chosen:updated");

Veja o exemplo no seu código:

$(document).ready(function() {
  var categories = $("select[name=categories]")
  var equipments = $("select[name=equipments]")

  categories.chosen();
  equipments.chosen();

  categories.on("change", function() {
    //obtem a posição escolhida no select das categorias
    var pos = categories.find("option:selected").index();

    //força a seleção no segundo select com jquery normal e não relacionado com o Chosen
    equipments.find("option").eq(pos).prop('selected', true);

    //chama a atualização do chosen para que o segundo select mostre o elemento certo
    equipments.trigger("chosen:updated");
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.min.css">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.jquery.min.js"></script>
<form method="post" id="form">
  <div class="row justify-content-center">
    <div class="col-md-4">
      <div class="form-group">
        <select name="categories" class="chosen-select" id="categories">
          <option value=""></option>
          <option value="câmera">câmera</option>
          <option value="celular">Celular</option>
          <option value="computador">Computador</option>
        </select>
      </div>
    </div>
    <div class="col-md-4">
      <div class="form-group">
        <select name="equipments" class="chosen-select" id="equipments">
          <option value=""></option>
          <option value="GoPro">GoPro</option>
          <option value="Samsung A10">Samsung A10</option>
          <option value="Notebook">Notebook</option>
        </select>
      </div>
    </div>
  </div>
</form>

1

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 .