title: How to get selected dropdown values in jQuery?
body: <p>I am trying get selected values form two drop down lists.
  But my code shows only first values(<code>&lt;option&gt;</code>) of the dropdown lists.</p>
  
  <p>Even if I select the second option still I am getting the first value of the drop down list.</p>
  
  <p>Here is the demo: <a href="https://codepen.io/anon/pen/OMOYGe" rel="nofollow">https://codepen.io/anon/pen/OMOYGe</a></p>
  
  <p>This is my jQuery:</p>
  
  <pre><code>$(document).ready(function() {
      /* saving selected values in variables */
      var selected_destination = $('.text-one :selected').val();
      var selected_attraction_or_activity = $('.text-two :selected').val();
  
      /* Showing selected values when the button is clicked*/
      $('#attr_acti_btn').click(function(){
          alert (selected_destination);
          alert (selected_attraction_or_activity);
          document.getElementById("myDiv").innerHTML = selected_destination;
   document.getElementById("attr_or_act_div").innerHTML = selected_attraction_or_activity;
      });
  
  });
  </code></pre>
  
  <p>What I am doing wrong?
  How can I get 2nd value if select the 2nd value and hit the button <code>Click to Show!</code>?</p>
  
  <p><strong>Why the ******* I'm getting down votes for this question?
  what's wrong with this question?</strong></p>