title: Populating HTML form from Bootstrap Modal in select option
body: <p>I have an HTML form that is within a Bootstrap Modal, that gets populated via Javascript. Basically the code reads data from a MySql Db and presents it to a form. Click the row in the form and it loads the modal with default values from the form, which can be then updated and then written back to the MySql Db through an MVC CRUD type scenario.
  The problem I am having is that all of the form &quot;input&quot; populate correctly using the &quot;name&quot; generated by the JS script, but I cannot get it to populate the &quot;select&quot;&quot;option&quot; text input using the &quot;name&quot; generated by the JS script.</p>
  <p>HTML code snippet as follows:-</p>
  <pre><code>    &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot; aria-hidden=&quot;true&quot;&gt;&amp;times;&lt;/button&gt;
      &lt;div class=&quot;modal fade&quot; id=&quot;editModal&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot; aria- 
     labelledby=&quot;basicModal&quot; aria-hidden=&quot;true&quot;&gt;
      &lt;div class=&quot;modal-dialog&quot;&gt;
      &lt;div class=&quot;modal-content&quot;&gt;
      &lt;div class=&quot;modal-header&quot;&gt;
     &lt;a href=&quot;#&quot; data-dismiss=&quot;modal&quot;&gt; &lt;img src=&quot;img/footer-logo.png&quot; width=&quot;30px&quot; height=&quot;30px&quot;&gt; 
      `enter code here`&lt;small&gt;Back&lt;/small&gt;
     &lt;/a&gt; &lt;span id=&quot;myModalLabel&quot; style=&quot;margin-left:20px;&quot;&gt;&lt;font size=&quot;+2&quot;&gt;&lt;b&gt;Update entry&lt;/b&gt; 
     &lt;/font&gt;&lt;/span&gt; 
      &lt;/div&gt;
      &lt;div class=&quot;modal-body&quot;&gt;
      &lt;table class=&quot;table table-striped&quot;&gt;
         &lt;thead&gt;
            &lt;tr&gt;
               &lt;th&gt;From&lt;/th&gt;
               &lt;td&gt;&lt;?php echo $orderbook_info['collection_company'] . &quot; &quot; . $orderbook_info['collection_address_1'] . &quot; &quot; . $orderbook_info['collection_address_2'] . &quot; &quot; . $orderbook_info['collection_city']; ?&gt;&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
               &lt;th&gt;To&lt;/th&gt;
               &lt;td&gt;&lt;?php echo $orderbook_info['delivery_company'] . &quot; &quot; . $orderbook_info['delivery_address_1'] . &quot; &quot; . $orderbook_info['delivery_address_2'] . &quot; &quot; . $orderbook_info['delivery_city']; ?&gt;&lt;/td&gt;
            &lt;/tr&gt;
         &lt;/thead&gt;
      &lt;/table&gt;
      &lt;form class=&quot;form-horizontal&quot; method=&quot;post&quot; action=&quot;index.php?route=orderbook/orderbook&quot;&gt;
      &lt;fieldset id=&quot;modal_form&quot;&gt;
      &lt;div class=&quot;form-group&quot; &gt;
         &lt;label class=&quot;col-md-4 control-label&quot; for=&quot;textinput&quot;&gt;Supplier&lt;/label&gt;
         &lt;div class=&quot;col-md-6&quot;&gt;
            &lt;input name=&quot;dataSupplier&quot; type=&quot;text&quot; class=&quot;form-control input-md&quot; value = &quot;&lt;?php echo $orderbook_info['supplier']; ?&gt;&quot;&gt;
         &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;form-group&quot; &gt;
         &lt;label class=&quot;col-md-4 control-label&quot; for=&quot;textinput&quot;&gt;Supplier&lt;/label&gt;
         &lt;div class=&quot;col-md-6&quot;&gt;
            &lt;select class=&quot;form-control input-md&quot;&gt;
               &lt;option selected=&quot;selected&quot; name=&quot;dataSupplier&quot;&gt;&lt;?php echo $orderbook_info['supplier']; ?&gt;&lt;/option&gt;
               &lt;option value=&quot;Seabourne&quot;&gt;Seabourne&lt;/option&gt;
            &lt;/select&gt;
         &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  <p>JS script as follows:-</p>
  <pre><code>&lt;script&gt;
  // When the modal is show
  $('#editModal').on('show.bs.modal', function (event) {
      var target = $(event.relatedTarget);
  
      // Get the order_id from the attribute
      var order_id = target.data('order-id');
      var supplier = target.data('order-supplier');
      
      
      
      var modal = $(this);
  
      // Find the input from modal and put a value in it
      modal.find('input[name=dataWaybillNo]').val(order_id);
      modal.find('input[name=dataSupplier]').val(supplier);
      
      
  })
  </code></pre>
  
  <p>So, &quot;input&quot; populates default correctly similar to placeholder, but &quot;option&quot; does not</p>