![](https://iknow-base.cdn.bcebos.com/lxb/notice.png)
jQuery ajax 不刷新页面动态获取select的option
页面上有一个select,我希望实现每当我点击这个select就用ajax从后台读取数据库的值作为option,显示成下拉列表,option的数量和值都不固定,需要每次选...
页面上有一个select,我希望实现每当我点击这个select就用ajax从后台读取数据库的值作为option,显示成下拉列表,option的数量和值都不固定,需要每次选择时都从数据库读而不刷新整个页面,只想刷新select的下拉列表。
用了click事件,点击后虽然能读出数据库的数据,但是在ie下就直接把下拉框收上去了,无法选择,而在chrome下可以选择,但是点击某个option的时候貌似又触发了一次click事件,导致所选的option被刷新成默认的了。求高手给个解决方案
希望依然能用jQuery、ajax实现 展开
用了click事件,点击后虽然能读出数据库的数据,但是在ie下就直接把下拉框收上去了,无法选择,而在chrome下可以选择,但是点击某个option的时候貌似又触发了一次click事件,导致所选的option被刷新成默认的了。求高手给个解决方案
希望依然能用jQuery、ajax实现 展开
4个回答
展开全部
首先说下解决方案:
由于select的点击就显示下拉列表时控件本身的特性,无法取消(我尝试过阻止默认事件,结果没有反应),所以最好的方法我觉得就是模拟select,就是说不用select标签,自己写一组html替换select,这方面成熟的jquery插件也不少。这样做便于控制下拉列表何时显示隐藏,不用担心click的问题。而且可以避免select本身的一些缺陷达到跨浏览器的目的
由于select的点击就显示下拉列表时控件本身的特性,无法取消(我尝试过阻止默认事件,结果没有反应),所以最好的方法我觉得就是模拟select,就是说不用select标签,自己写一组html替换select,这方面成熟的jquery插件也不少。这样做便于控制下拉列表何时显示隐藏,不用担心click的问题。而且可以避免select本身的一些缺陷达到跨浏览器的目的
展开全部
你试试这个代码
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);
});
}
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);
});
}
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
最好只在窗口加载完毕后加载这些数据,否则每点一次就加载一次,没这个必要
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
不用click事件,换成change事件试试看
前段时间刚实现此功能,就是用的change事件
前段时间刚实现此功能,就是用的change事件
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询