Question

我使用Ajax用PHP返回的数组中的值填充select html元素。

Ajax代码：

<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>

可悲的是，那里的值不会改变select元素的默认预览值。

示例：

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

正如你所看到的，首先我选择＆＃34;衬衫＆＃34;在第一个选择菜单中，然后项目将更改第二个选择菜单中的属性，遗憾的是项目的默认预览将保持不变。在这种情况下：＆＃34;先生场景价格＆＃34;。在我选择了另一个项目后，它会发生变化。

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

我想要的是什么：

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

2）第二个选择菜单应立即更改并显示：＆＃34;坦克价格＆＃34;而不是＆＃34;爵士场景价格＆＃34;。

有没有人知道如何让这个工作？

Answer 1

添加没有值的默认<option>

 success: function(data){

       var defOption ='<option value=""> Default text</option>';
       // html() method replaces existing
       $('#fds_price').html(defOption );

       $.each($.parseJSON(data), function(index, element) {
             .....
       });
}

另请注意，如果您设置dataType:'json'，则无需自行解析回复

Ajax选择即时更改默认值

1 个答案: