使用jquery ajax 动态生成下拉框代码如下：

 $.ajax({
                type:"get",
                dataType:"json",
                contentType:"application/json;charset=utf-8",
                url:"{{ url_for('ajax_categorys') }}",
                success:function(result){
                    $.each(result,function(index,value){
                        $("#ca").append("<option value='"+value.name+"'>"+value.name+"</option>");
                    })
                },
                error : function(XMLHttpRequest, textStatus, errorThrown) {
                    alert(errorThrown);
            },
                async:false             //false表示同步
                 }

                );

这样可以在页面生成的时候动态加载下拉框数据，但当下拉框数据有改变后，再次点击仍然是初始加载的数据。

使用click事件则可以加载新的数据，但是会在已有数据下添加，则会有重复的数据出现。

在ajax里加上$("#ca").empty(); 可以清空现有选项，但是没法选择我需要的选项，因为当我点击其中一项选项时，又触发了另一次click事件。。。

 $("#ca").click(function(){
                $("#ca").empty();
                 $.ajax({
                type:"get",
                dataType:"json",
                contentType:"application/json;charset=utf-8",
                url:"{{ url_for('ajax_categorys') }}",
                success:function(result){

                    $.each(result,function(index,value){

                        $("#ca").append("<option value='"+value.name+"'>"+value.name+"</option>");
                    })
                },
                error : function(XMLHttpRequest, textStatus, errorThrown) {
                    alert(errorThrown);
            },
                async:false             //false表示同步
                 }

                );
            });

我如何才能使每次得到的下拉框选项都是最新的数据并且可以选中为需要的选项？？