title: Get the value of selected option in select2 and then set the value to an input text using jquery?
body: <p>I'm new to jquery and javascript, so maybe this is a silly question but i'm having problems setting the value obtained from a selected option in select2 to a text input. This is my code:</p>
  
  <p>
        </p>
  
  <pre><code>  &lt;head&gt;
  
      &lt;!-- stylesheets --&gt;
      &lt;link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"&gt;
      &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css"&gt;
  
  
      &lt;!-- scripts --&gt;
      &lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"&gt;&lt;/script&gt;
  
      &lt;script&gt;
        $(function(){
          // turn the element to select2 select style
          $('.select2').select2({
            placeholder: "Select a state"
          });
  
          var data = $(".select2 option:selected").text();
          $("#test").val(data);
        });
  
  
  
      &lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
  
      &lt;p&gt;select2 select box:&lt;/p&gt;
      &lt;p&gt;
        &lt;select  class="select2" style="width:300px"&gt;
            &lt;option&gt; &lt;/option&gt;
            &lt;option value="AL"&gt;Alabama&lt;/option&gt;
            &lt;option value="VT"&gt;Vermont&lt;/option&gt;
            &lt;option value="VA"&gt;Virginia&lt;/option&gt;
            &lt;option value="WV"&gt;West Virginia&lt;/option&gt;
        &lt;/select&gt;
      &lt;/p&gt;
  
      &lt;input type="text" id="test"&gt; 
  
    &lt;/body&gt;
  
    &lt;/html&gt;
  </code></pre>
  
  <p>Any ideas of what i'm doing wrong?</p>
  
  <p>Thanks!</p>