Ajax 选择立即更改默认值

我正在使用Ajax用PHP返回数组中的值填充选定的html元素。

阿贾克斯代码：

<script type = "text/javascript">
     $(document).ready(function(){
        $('#fds_categories').change(function () {
            var template_id = $(this).val();
            $.ajax({
                type: "POST",
                data: {
                    'username' : '<?php echo $user->username; ?>',
                    'categorie_id' : template_id
                },
                url: "ajax/fds_template_ajax.php",
                success: function(data){
                    $('#fds_price').empty();
                    $.each($.parseJSON(data), function(index, element) {
                        if(element.p == 0){
                            $('#fds_price').append(
                                $('<option data-icon="man"></option>').val(element.id).html(element.name + ' Price: ' + element.pb + ' Zcard')
                            );
                        }else{
                            $('#fds_price').append(
                                $('<option data-icon="man"></option>').val(element.id).html(element.name + ' Price: ' + element.p + ' Bucks')
                            );
                        }
                    });
                }
            });
        });
     });
</script>

遗憾的是，其中的值不会更改选择元素的默认预览值。

例：

动图图片：https://gyazo.com/6aab1545ff143536c17e97eb5ef6315a

如您所见，首先我在第一个选择菜单中选择"衬衫"，然后项目将更改第二个选择菜单中的属性，遗憾的是项目的默认预览将保留并且不会更改。在这种情况下："先生现场价格"。在我选择其中的另一个项目后，它会发生变化。

但是，一旦我在第一个选择中选择了值，有没有办法更改默认预览项目？

我想要什么：

1）从第一个选择菜单中选择衬衫，

2）第二个选择菜单应立即更改并显示："坦克价格"而不是"Sir场景价格"。

有谁知道如何让它工作？