title: How to return text values from Bootstrap Multi-Select
body: <p>I'm using bootstrap select for a multiple enabled dropdown.
  When a button is pressed i'm building a variable to use in an AJAX request.</p>
  
  <p>It works for returning the values (basically the ID's in this case), since it returns an array of values, i can use a loop to build the JSON.  However i also need to send the text value, but havent been able to get this working.</p>
  
  <pre><code>   $('#sendButton').click(function() {
      var modal = $('#modalPopup');
      var modalID = modal.data('value');
      var selectedOptionValue = $('#multiSelectBox').val();
      var selectedOptionName = $('#multiSelectBox').text();
      var sendRequest = {
          'modalNo': modalID,
          'products': []
      };
      for (var i = 0; i &lt; selectedOptionValue.length; i++) {
          sendRequest.products.push({
              'productId': selectedOptionValue[i],
              'productName': selectedOptionName
          });
      }
     });
  </code></pre>
  
  <p>I tried another loop to do <code>selectedOptionName[j]</code> when building the request but no luck, i end up getting all of the text values in my drop down.  Tried using:    </p>
  
  <pre><code>var selectedOptionName = $('#multiSelectBox:selected').text();
  </code></pre>
  
  <p>But this doesn't return anything.  Any ideas?</p>
  
  <p>HTML for drop down:</p>
  
  <pre><code>&lt;select class="selectpicker" multiple id="multiSelectBox" title="Select Product(s)"&gt;&lt;/select&gt;
  </code></pre>
  
  <p>Code to populate dropdown:</p>
  
  <pre><code>var html = '';
  for (var i = 0; i &lt; data.products.length; i++){
          html += '&lt;option value ="' + data.products[i].productId+ '"&gt;' + data.products[i].productName+ '&lt;/option&gt;'
      }
      $('#multiSelectBox').html(html);    
      $('.selectpicker').selectpicker('refresh');
  </code></pre>