text() returning entire object, instead of selected text

Question

I upgraded the jquery library from 1.4.2 to 3.4.0 Have a drop down. .val() is returning the selected value as expected, but .text() is returning is entire object. Need to know how to get the displayed text for the selected option.

$('#properties').change(function(){
var selected_id=$('#properties option:selected').val();
 var selected_value=$('#properties option:selected').text();
 $('#idresult').text(selected_id);
 $('#textresult').text(selected_value);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<select id="properties" style="width: 100%; height: 80px;" size="6">
    <option value="1">Country</option>
    <option value="3">City</option>
    <option value="4">Metro Area (Only U.S.)</option>
    <option value="2">State/Province</option>
    <option value="5">Zip Code (Only U.S.)</option>
</select>

<div id="textresult"></div>
<div id="idresult"</div>

it is working fine when I tried it on jsfiddle and stackoverflow code snippet. But in my code, it is not giving the below values. Any ideas what might have gone wrong. It works fine when I switch back jquery to 1.4.2
selected_id is 1 as expected.
selected_value is k.fn.init [option, prevObject: k.fn.init(1)]. 
Expecting it to be "Country"