Question

jQuery ajax 不刷新页面动态获取select的option

页面上有一个select，我希望实现每当我点击这个select就用ajax从后台读取数据库的值作为option，显示成下拉列表，option的数量和值都不固定，需要每次选择时都从数据库读而不刷新整个页面，只想刷新select的下拉列表。
用了click事件，点击后虽然能读出数据库的数据，但是在ie下就直接把下拉框收上去了，无法选择，而在chrome下可以选择，但是点击某个option的时候貌似又触发了一次click事件，导致所选的option被刷新成默认的了。求高手给个解决方案
希望依然能用jQuery、ajax实现

Answer 1

首先说下解决方案：
由于select的点击就显示下拉列表时控件本身的特性，无法取消（我尝试过阻止默认事件，结果没有反应），所以最好的方法我觉得就是模拟select，就是说不用select标签，自己写一组html替换select，这方面成熟的jquery插件也不少。这样做便于控制下拉列表何时显示隐藏，不用担心click的问题。而且可以避免select本身的一些缺陷达到跨浏览器的目的

Answer 2

你试试这个代码
resetSelectElement = function(target, options, value, fireChange) {
target = $(target);
target.empty();
for ( var i = 0; i < options.length; i++) {
target.append('<option value="' + options[i].value + '">' + options[i].text + '</option>');
}
if (value === undefined || value === false || value.length < 1) {
value = '';
}
target.val(value);
if (fireChange) {
target.change();
}
};
这个要求服务器端返回的数据类似[{value:5, text: 'text'}, {value: 8, text: 'text 2'}]，用法示例
<select name='demo' onchange='demoChange(this)'></select>
<select id="nextSel"></select>
function demoChange(obj) {
$.post('your.url', {id: obj.value}, function(response) {

resetSelectElement($('#nextSel'), response);
});

}

Answer 3

最好只在窗口加载完毕后加载这些数据，否则每点一次就加载一次，没这个必要

Answer 4

不用click事件，换成change事件试试看
前段时间刚实现此功能，就是用的change事件