Why is chosen preventing a JavaScript conditional from working properly?-CodePudding

There are two snippets below. I'm using Bootstrap 3 and Chosen for my select menus.

The functionality with the following is that when a specific selection is made (i.e.; Social Services), then a second select menu displays. That menu goes away if Defendant, Minor or Witness are selected. The piece that controls this is here:

document.getElementById("form1").addEventListener("change", function () {
  var style = this.value == 4 || this.value == 5 ? "block" : "none";
  document.getElementById("form2").style.display = style;
});

Snippet 1: I am able to use chosen, but when I select Social Services, the second select menu doesn't come up. In order for chosen to work, the chosen class must be set to a width: 100%;, which is this piece:

$(".chosen-select").chosen({
  width: "100%"
});

$(".chosen-select").chosen({
  width: "100%"
});

document.getElementById("form1").addEventListener("change", function () {
  var style = this.value == 4 || this.value == 5 ? "block" : "none";
  document.getElementById("form2").style.display = style;
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/bootstrap-chosen.css" rel="stylesheet">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>

<div >
  <div >
    <div >
      <div >
        <label for="form1">Involved How?</label>
        <select id="form1" name="form1" data-placeholder="Involved as..." >
          <option value="1">Defendant</option>
          <option value="2">Minor</option>
          <option value="3">Witness</option>
          <option value="4">Social Services</option>
          <option value="5">Prosecution</option>
        </select>
      </div>
    </div>
    <div >
      <div  id="form2" style="display: none;">
        <label for="form2">Agency</label>
        <select name="form2" >
          <option value="1">Legal Services</option>
          <option value="2">Social Services</option>
          <option value="3">Prosecutor's Office</option>
        </select>
      </div>
    </div>
  </div>
</div>

Snippet 2: If I remove the snippet:

$(".chosen-select").chosen({
  width: "100%"
});

...then the select menu turns back into it's native format (without chosen) and allows me to choose Social Services and display the second select menu, but the chosen functionality doesn't work in that first select menu.

document.getElementById("form1").addEventListener("change", function () {
  var style = this.value == 4 || this.value == 5 ? "block" : "none";
  document.getElementById("form2").style.display = style;
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/bootstrap-chosen.css" rel="stylesheet">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>

<div >
  <div >
    <div >
      <div >
        <label for="form1">Involved How?</label>
        <select id="form1" name="form1" data-placeholder="Involved as..." >
          <option value="1">Defendant</option>
          <option value="2">Minor</option>
          <option value="3">Witness</option>
          <option value="4">Social Services</option>
          <option value="5">Prosecution</option>
        </select>
      </div>
    </div>
    <div >
      <div  id="form2" style="display: none;">
        <label for="form2">Agency</label>
        <select name="form2" >
          <option value="1">Legal Services</option>
          <option value="2">Social Services</option>
          <option value="3">Prosecutor's Office</option>
        </select>
      </div>
    </div>
  </div>
</div>

The only difference here is this:

$(".chosen-select").chosen({
  width: "100%"
});

Does anyone know why this is happening or if there is a workaround for it?

CodePudding user response：

The issue is because Chosen raises jQuery-based events, so using addEventListener() won't detect them. You need to use jQuery's on() method instead:

$(".chosen-select").chosen({
  width: "100%"
});

$("#form1").on("change", function() {
  $("#form2").toggle(this.value == 4 || this.value == 5);
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/bootstrap-chosen.css" rel="stylesheet">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>

<div >
  <div >
    <div >
      <div >
        <label for="form1">Involved How?</label>
        <select id="form1" name="form1" data-placeholder="Involved as..." >
          <option value="1">Defendant</option>
          <option value="2">Minor</option>
          <option value="3">Witness</option>
          <option value="4">Social Services</option>
          <option value="5">Prosecution</option>
        </select>
      </div>
    </div>
    <div >
      <div  id="form2" style="display: none;">
        <label for="form2">Agency</label>
        <select name="form2" >
          <option value="1">Legal Services</option>
          <option value="2">Social Services</option>
          <option value="3">Prosecutor's Office</option>
        </select>
      </div>
    </div>
  </div>
</div>