title: How do I populate values for multiple chosen plugin?
body: <p>I am using a jQuery plugin (<a href="http://harvesthq.github.io/chosen/" rel="nofollow noreferrer">http://harvesthq.github.io/chosen/</a>) and I am having trouble populating selected values into the textbox.</p>
  
  <p>Based on the options page, it says
  $('.my_select_box').trigger('chosen:updated');</p>
  
  <p>However I do have multiple select boxes, say</p>
  
  <pre><code>&lt;select id="select1" class="chzn-select" name="select1" data-placeholder="Choose an employee..." multiple="true" style="width: 350px; display: none;"&gt;&lt;/select&gt;
  
  &lt;select id="select2" class="chzn-select" name="select2" data-placeholder="Choose an employee..." multiple="true" style="width: 350px; display: none;"&gt;&lt;/select&gt;
  
  &lt;select id="select3" class="chzn-select" name="select3" data-placeholder="Choose an employee..." multiple="true" style="width: 350px; display: none;"&gt;&lt;/select&gt;
  </code></pre>
  
  <p>and in my jQuery script I do have </p>
  
  <pre><code>$('.chzn-select', this).chosen(); // do I use this to prepopulate?
  </code></pre>
  
  <p>but if I had already selected values into the 3 select boxes, how do I populate back the values again?</p>
  
  <p>I have a function that saves them into the database though:</p>
  
  <pre><code>$("#btnSave").click(function(){
  
      var firstVal= $("#select1").val();
      var secondVal= $("#select2").val();
      var thirdVal = $("#select3").val();
  
       $.ajax({
          type: "post",
          url: "myPoST",
          data: {
              firstVal:firstVal,
              secondVal :secondVal,
              thirdVal :thirdVal;
          },
          ....// what do I do here?
        });
    });
  </code></pre>
  
  <p>Help is greatly appreciated. Thanks!</p>
  
  <p>Desired output when page is loaded:</p>
  
  <p><img src="https://i.stack.imgur.com/nq01Z.jpg" alt="enter image description here"></p>