使用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表示同步
}
);
});
我如何才能使每次得到的下拉框选项都是最新的数据并且可以选中为需要的选项？？
1、要想每次都是新的数据，就要清除缓存，在url后面加个时间戳就行了；
2、每次加载数据之前清楚一下之前添加的数据，也可以用楼上说的html()
var strHtml="";
$.each(result,function(index,value){
if(选中的条件){
strHtml+="<option selected="selected" value='"+value.name+"'>"+value.name+"</option>";
}else{
strHtml+="<option value='"+value.name+"'>"+value.name+"</option>";
}
})
$("#ca").html(strHtml);
不知道你的这个列表是作什么用的，需要这么强同步的数据，通常下拉列表都是从缓存里读取数据，即使是业务数据也是一次性在页面加载的从后台读取数据
一般的做法是，固定的选项直接写好json文件，这样加载快，如果是非固定的，就用Ajax来做了。
ajax请求的时候，首先将当前选中的id，记录到一全局变量，例如(origin_id)
然后请求到数据后，每一个id跟origin_id的值，如果一样，就加上selected=true
然后用innerHtml的方式，替换掉dom树
1、用html()代替append()就不需要每次点击去清空了
2、click点击事件阻止事件冒泡就不会点击选项而触发更新事件了
- 点击
#ca时，检查有没有options_loaded=1，有就不再发起 ajax 请求了。没有的话： - 发起 ajax 请求获取最新数据。
- 追加 option 前先清空所有 options。
- 追加后，给
#ca元素添加属性options_loaded=1。
这个前提是，预设用户某次打开这个页面、点击了 #ca、加载了数据后，数据没有再更新。如果需求是相反的，那就要用另外的思路了。