title: set select value on page load/reload
body: <p>I want to change the select component value on page load. I read the <a href="https://stackoverflow.com/questions/13343566/set-select-option-selected-by-value">related post</a> and every solution presented there works for a button click. However, what I would like to have, is value set after the page is loaded, without any user action. What I have is:</p>
  
  <pre><code>&lt;script&gt;
  $(document).ready(function(){
      $("div.id_100").val("March").change();
      alert("ready!");
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>and:</p>
  
  <pre><code>&lt;div class="id_100"&gt;
      &lt;select class="form-control"&gt;
          &lt;option  th:text="January"&gt;January&lt;/option&gt;
          &lt;option  th:text="February"&gt;February&lt;/option&gt;
          &lt;option  th:text="March"&gt;March&lt;/option&gt;
      &lt;/select&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have the same piece of code attached to a button, and it works. It just doesn't work for ready() function. So my question is: how to set select value after the page is loaded?</p>
  
  <pre><code>$( "#button1" ).click(function() {
      $("div.id_100").val("March").change();  
  });
  </code></pre>
  
  <p>Full html</p>
  
  <p>
      </p>
  
  <pre><code>&lt;head&gt;
  &lt;title&gt;Wszystkie Delegacje&lt;/title&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
  
  &lt;link rel="stylesheet" href="../static/css/blog.css" th:href="@{/css/blog.css}" /&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /&gt;
  &lt;link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css"/&gt;
  
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.datatables.net/1.10.13/js/dataTables.bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script th:src="@{/js/triptable.js}"&gt;&lt;/script&gt;
  
  
  
  &lt;link
      href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.0/bootstrap-table.min.css"
      rel="stylesheet" /&gt;
  
  &lt;style type="text/css"&gt;
  .pull-right {
      float: right !important;
      color: green;
  }
  
  @media ( min-width : 1600px) {
      .container {
          max-width: 2000px;
      }
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div layout:fragment="content"&gt;
  
  &lt;div class="container"&gt;
  
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.0/bootstrap-table.min.js"&gt;&lt;/script&gt;
  
  &lt;a class="btn btn-md btn-info" id="button1"&gt;miech&lt;/a&gt;
  
  
  &lt;div class="id_100"&gt;
      &lt;select class="form-control"&gt;
      &lt;option  th:text="January"&gt;January&lt;/option&gt;
      &lt;option  th:text="February"&gt;February&lt;/option&gt;
      &lt;option  th:text="March"&gt;March&lt;/option&gt;                 
      &lt;/select&gt;
  &lt;/div&gt;
  
  
  
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
  
  $(document).ready(function(){
  
      $("div.id_100 select").val("March").change();
  
      alert("ready!");
  
  
  });
  
  $( "#button1" ).click(function() {
  
  
      $("div.id_100").val("March").change();
  
  
  });
  
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>