jQuery: Get selected option text from select element

by jddevight

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<h2>Select a color and then click the "Get Selected Color" button</h2>

<select id="colors">
  <option value="Red">Red</option>
  <option value="Green">Green</option>
  <option value="Blue">Blue</option>
</select>

<button id="getColor">
Get Selected Color
</button>

<h2>Color Selected</h2>

<div id="results">

</div>

<div style="position: absolute;bottom: 5px;">
Read about this Fiddle at: <a href="http://jsdev.wikidot.com/howto:13" target="_blank">How To: jQuery - Get selected text from a select element</a>
</div>

CSS

#results {
  min-height: 50px;
  border: 1px solid lightgrey;
  padding: 5px;
}

JavaScript

$(function () {
  var count = 1;
  
  $("#getColor").on("click", function (event) {

    var color = $("#colors option:selected").val();

    $("#results").prepend("<div>" + count++ + ". The selected color is: " + color);
  });
});