在页面上加载时，下拉列表的选定值（动态出现）在警报或控制台中显示为未定义

Question

我有一个选择框，其中值是通过ajax调用从json动态获得的，这里我正确地获取了所有值。选项值包含文件路径，选项文本包含文件名。但是当我想显示的值时页面上的选定选项将加载其显示内容未定义。 我还需要在页面加载中显示。任何人都可以帮助我。这是下面的代码。

$(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"
    } ]
}