Why is chosen preventing a JavaScript conditional from working properly?

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/bootstrap-chosen@1.4.2/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 class="container">
  <div class="panel-body">
    <div class="col-sm-6 b-r">
      <div class="form-group">
        <label for="form1">Involved How?</label>
        <select id="form1" name="form1" data-placeholder="Involved as..." class="chosen-select form-control">
          <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 class="col-sm-6 b-r">
      <div class="form-group" id="form2" style="display: none;">
        <label for="form2">Agency</label>
        <select name="form2" class="form-control chosen-select">
          <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/bootstrap-chosen@1.4.2/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 class="container">
  <div class="panel-body">
    <div class="col-sm-6 b-r">
      <div class="form-group">
        <label for="form1">Involved How?</label>
        <select id="form1" name="form1" data-placeholder="Involved as..." class="chosen-select form-control">
          <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 class="col-sm-6 b-r">
      <div class="form-group" id="form2" style="display: none;">
        <label for="form2">Agency</label>
        <select name="form2" class="form-control chosen-select">
          <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?

Solution

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/bootstrap-chosen@1.4.2/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 class="container">
  <div class="panel-body">
    <div class="col-sm-6 b-r">
      <div class="form-group">
        <label for="form1">Involved How?</label>
        <select id="form1" name="form1" data-placeholder="Involved as..." class="chosen-select form-control">
          <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 class="col-sm-6 b-r">
      <div class="form-group" id="form2" style="display: none;">
        <label for="form2">Agency</label>
        <select name="form2" class="form-control chosen-select">
          <option value="1">Legal Services</option>
          <option value="2">Social Services</option>
          <option value="3">Prosecutor's Office</option>
        </select>
      </div>
    </div>
  </div>
</div>