title: Why is chosen preventing a JavaScript conditional from working properly?
body: <p>There are two snippets below. I'm using Bootstrap 3 and Chosen for my <code>select</code> menus.</p>
  <p>The functionality with the following is that when a specific selection is made (i.e.; Social Services), then a second <code>select</code> menu displays. That menu goes away if Defendant, Minor or Witness are selected. The piece that controls this is here:</p>
  <pre><code>document.getElementById(&quot;form1&quot;).addEventListener(&quot;change&quot;, function () {
    var style = this.value == 4 || this.value == 5 ? &quot;block&quot; : &quot;none&quot;;
    document.getElementById(&quot;form2&quot;).style.display = style;
  });
  </code></pre>
  <p>Snippet 1: I am able to use chosen, but when I select <strong>Social Services</strong>, the second select menu doesn't come up. In order for chosen to work, the chosen class must be set to a <code>width: 100%;</code>, which is this piece:</p>
  <pre><code>$(&quot;.chosen-select&quot;).chosen({
    width: &quot;100%&quot;
  });
  </code></pre>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(".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;
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"&gt;
  &lt;link href="https://cdn.jsdelivr.net/npm/bootstrap-chosen@1.4.2/bootstrap-chosen.css" rel="stylesheet"&gt;
  
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;div class="container"&gt;
    &lt;div class="panel-body"&gt;
      &lt;div class="col-sm-6 b-r"&gt;
        &lt;div class="form-group"&gt;
          &lt;label for="form1"&gt;Involved How?&lt;/label&gt;
          &lt;select id="form1" name="form1" data-placeholder="Involved as..." class="chosen-select form-control"&gt;
            &lt;option value="1"&gt;Defendant&lt;/option&gt;
            &lt;option value="2"&gt;Minor&lt;/option&gt;
            &lt;option value="3"&gt;Witness&lt;/option&gt;
            &lt;option value="4"&gt;Social Services&lt;/option&gt;
            &lt;option value="5"&gt;Prosecution&lt;/option&gt;
          &lt;/select&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-sm-6 b-r"&gt;
        &lt;div class="form-group" id="form2" style="display: none;"&gt;
          &lt;label for="form2"&gt;Agency&lt;/label&gt;
          &lt;select name="form2" class="form-control chosen-select"&gt;
            &lt;option value="1"&gt;Legal Services&lt;/option&gt;
            &lt;option value="2"&gt;Social Services&lt;/option&gt;
            &lt;option value="3"&gt;Prosecutor's Office&lt;/option&gt;
          &lt;/select&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Snippet 2: If I remove the snippet:</p>
  <pre><code>$(&quot;.chosen-select&quot;).chosen({
    width: &quot;100%&quot;
  });
  </code></pre>
  <p>...then the select menu turns back into it's native format (without chosen) and allows me to choose <strong>Social Services</strong> and display the second select menu, but the chosen functionality doesn't work in that first select menu.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>document.getElementById("form1").addEventListener("change", function () {
    var style = this.value == 4 || this.value == 5 ? "block" : "none";
    document.getElementById("form2").style.display = style;
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"&gt;
  &lt;link href="https://cdn.jsdelivr.net/npm/bootstrap-chosen@1.4.2/bootstrap-chosen.css" rel="stylesheet"&gt;
  
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;div class="container"&gt;
    &lt;div class="panel-body"&gt;
      &lt;div class="col-sm-6 b-r"&gt;
        &lt;div class="form-group"&gt;
          &lt;label for="form1"&gt;Involved How?&lt;/label&gt;
          &lt;select id="form1" name="form1" data-placeholder="Involved as..." class="chosen-select form-control"&gt;
            &lt;option value="1"&gt;Defendant&lt;/option&gt;
            &lt;option value="2"&gt;Minor&lt;/option&gt;
            &lt;option value="3"&gt;Witness&lt;/option&gt;
            &lt;option value="4"&gt;Social Services&lt;/option&gt;
            &lt;option value="5"&gt;Prosecution&lt;/option&gt;
          &lt;/select&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-sm-6 b-r"&gt;
        &lt;div class="form-group" id="form2" style="display: none;"&gt;
          &lt;label for="form2"&gt;Agency&lt;/label&gt;
          &lt;select name="form2" class="form-control chosen-select"&gt;
            &lt;option value="1"&gt;Legal Services&lt;/option&gt;
            &lt;option value="2"&gt;Social Services&lt;/option&gt;
            &lt;option value="3"&gt;Prosecutor's Office&lt;/option&gt;
          &lt;/select&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>The only difference here is this:</p>
  <pre><code>$(&quot;.chosen-select&quot;).chosen({
    width: &quot;100%&quot;
  });
  </code></pre>
  <p><strong>Does anyone know why this is happening or if there is a workaround for it?</strong></p>