JQuery - get property of selected option, on change event

Question

I have two <select> elements. the second is populated through ajax when the first is changed.
So far so good. The populated content is the inner html content of the element.

<select id="PaymentContractId">
  <!-- dynamic content start -->
  <option title="400" value="12">XXX Street,326</option>
  <option title="500" value="67">YYY Street, 444</option>
  <!-- dynamic content end -->
</select>

The JQuery code is:

  $("#PaymentContractId").on('change', function(eve) {
    console.log($("option:selected").prop("title"));
    // console.log($("#PaymentContractId option:selected").prop("title")); 
    // this also failed
  });

The code returns empty strings. any idea why (or how to do it)?

Answer 1

it could be because there are other selects in the page, you need to target the options within the current select element

  $("#PaymentContractId").on('change', function(eve) {
    console.log($(this).find("option:selected").prop("title"));
  });

Demo: Solution - Problem