.change in jQuery is not giving me the results i need for a select

Question

Here is my html

<select class="selecturl">
 <optgroup label="Fruit">

  <option value="/something/167/remote">Apple</option>

  <option selected="" value="/something/168/remote">Oranges</option>

  <option value="/something/169/remote">Bananas</option>

  <option value="/something/170/remote">Carots</option>

 </optgroup>
</select>

And here is my jQuery

$('.selecturl').change(function() {
      console.log(this);

I have no idea how to get the string "Apple" or anything that is selected

Answer 1

Use .val() to get the value of the selected option, or .text() of the :selected option if you want the text, like this:

$('.selecturl').change(function() {
  console.log($(this).val()); //gets the value
  console.log($(this).find(':selected').text()); //gets the text
});

You can test it out here.