on page load selected value(coming dynamically) of dropdown is showing undefined in alert or console

Question

I have a select box in which value is coming dynamically from a json with ajax call ,here I am getting all the values correctly.The option value contains filepath and option text contains filename.But when I want to display the value of selected option on page load its displaying undefined.but onclick its displaying correctly. I need to display on page load also.Can anyone please help me.Here is the code below.

$(document).ready(function(){   
$.ajax({
url:'http://localhost/fileuploadembed/filelist.json',
type:'GET',
dataType:'json',
success:function(json){
console.log(json.paths);
$.each(json.paths,function(i,value){
console.log(value.filePath);
$('#filelist').append($('<option>').text(value.fileName).attr('value',value.filePath));
var y = $("#filelist option:selected").val();
$("#fileembed").attr("src",y);
});
}
});
$('select').on('change', function() {
  var x = this.value ;
  $("#fileembed").attr("src",this.value);
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <select id="filelist"></select>
    <iframe id="fileembed" width="100%" height="500px"/></iframe>

{
    "paths": [{
        "fileName": "test.pdf",
        "filePath": "http://localhost/fileuploadembed/files/test.pdf"
    },
    {
        "fileName": "sample.pdf",
        "filePath": "http://localhost/fileuploadembed/files/sample.pdf"
    } ]
}