title: Prepopulating <select multiple> form-control
body: <p>I'm trying to preselect multiple values in a <code>&lt;select multiple class=form-control&gt;</code> element. I'm using ASP.Net Core and RAZOR to render the html. </p>
  
  <p>At the top of the html file, I define the long list of fruits that I want displayed in the multiselect box. Later on, I iterate through the list and get the fruits the user previously selected and try to show the option in the list as selected. </p>
  
  <pre><code>@{  
      var allFruitsList = new List&lt;string&gt;() 
          {"strawberries","blueberries","bananas","kiwis",
           "apples", "raspberries", "pears"};
  
      var profile = ViewData["UserFavoriteFruit"];
      var myFaveFruits = profile.MyFavoriteFruits; //would be List&lt;string&gt;
  }
  </code></pre>
  
  <p>This is the section of code where I go through the fruits previously selected to know which ones I want to appear as selected on page load</p>
  
  <pre><code>&lt;select multiple class="form-control" id="myMultiselect"&gt;
      &lt;option disabled&gt; - - - - - Select Favorite Fruit - - - - -&lt;/option&gt;
          @foreach (var v in allFruitsList)
          {
              if (myFaveFruits.Contains(@v))
              {
                  &lt;option selected&gt;@v&lt;/option&gt;
              }
              else
              {
                  &lt;option&gt;@v&lt;/option&gt;
              }
          }
  &lt;/select&gt;
  </code></pre>
  
  <p>I've tried many different things including : </p>
  
  <ol>
  <li><code>&lt;option selected="true"&gt;@v&lt;/option&gt;</code></li>
  <li><code>&lt;option selected="selected"&gt;@v&lt;/option&gt;</code></li>
  <li><code>&lt;option selected&gt;@v&lt;/option&gt;</code></li>
  <li><code>&lt;option selected="selected" value=@v&gt;@v&lt;/option&gt;</code></li>
  <li><code>&lt;option onload="MakeSelectionLookSelected()"&gt;&lt;/option&gt;</code></li>
  <li><p><code>&lt;option onload="MakeSelectionLookSelected('@v')" id='@v'&gt;@v&lt;/option&gt;</code></p>
  
  
  
  <pre><code>MakeSelectionLookSelected() {
      $(this).click();
  }
  
  MakeSelectionLookSelected() {
      $(this).change();
  }
  
  MakeSelectionLookSelected(id) {
      $("#"+id).click();
  }
  
  MakeSelectionLookSelected(id) {
      $("#"+id).change();
  }
  </code></pre>
  
  </li>
  </ol>
  
  <p>None of these approaches are working. What's weird is that when I use the DOM explorer, the code reflects that the correct <code>&lt;option&gt;</code> elements are being tagged with the "selected" attribute, but the UI is not displaying the blue box fill around the entries that are supposed to be selected...</p>
  
  <p>Anyone know what I'm doing wrong? What else I can try? If bootstrap multiple select does not allow prepopulating? What a good alternative is? </p>