Change another selection option when a selection is triggered, using jquery-Chosen

Question

I want to change another selection when a selection is triggered. I am using Jquery Chosen.

Example with pure Jquery here

At the moment I’ve done:

<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())
    })

})

How can I do that?

Answer 1

What you want to do only with pure JS and HTML is quite simple, but using the Chosen library complicates things a bit. To make the selection of an element in a <select> manifest on the page need to give a special call in the plugin to update the component with:

oSeuSelect.trigger("chosen:updated");

This is something that the documentation itself evidences.

Excerpt from the relevant documentation:

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");

See the example in your code:

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