我有一个选择框,只有在点击时才应填充。涉及的查询需要很长时间,所以我从页面上显示的标准数据中取消它。
我已经实现了函数loadMyData(element, id)
,它执行ajax请求并将数据作为JSON返回。然后它填充选择框。
事件被绑定到元素,如下所示:
<select onclick="loadMyData(this, 1)">
</select>
并填充选择框:
$.each(data, function(index, optionData) {
select.options[element.options.length]
= new Option(optionData.Text, optionData.Value);
});
在基于Gecko的浏览器上工作,但在Webkit上(safari和chrome),当我点击选择框时,在ajax请求之前显示一个空的下拉框,在响应之后,下拉框是没有精神焕发。必须在选择框外单击并再次单击它才能看到更新的“选项”。
有没有办法强制它刷新内容?或者只是简单地自动选择第一个并隐藏下拉框?
**尝试onfocus并发现相同的结果。 onmouseover工作,但“不可用”。由于选择框在其初始状态为空,因此onchange不可行。*
答案 0 :(得分:2)
一些想法:
不要使用标准的html选择框 - 您的应用程序也不会优雅地降级。
使用一些点击劫持 - 有一个透明的div OVER selet框 - IE的问题
使用checbox允许“非标准”答案,这将填充选择框并使其可点击(未禁用)
我的最爱:缓存查询结果并立即填充选择框。在选择框附近添加另一个“referesh options”按钮,通过AJAX重新加载选项。
答案 1 :(得分:1)
像往常一样,这里糟糕的浏览器是IE 6及以下版本,因为它在select选项上只有这个readonly的东西,所以处理它的唯一方法是替换整个select。
<强>的index.php 强>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>lazy loading thing</title>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/script.js" type="text/javascript"></script>
</head>
<body>
<form>
<p>
<span id="replaceMe"><select name="drinks">
<option>oh well... click me...</option>
</select></span>
</p>
</form>
</body>
</html>
<强>的script.js 强>
$(function() {
$('#replaceMe').one('click', replaceIt);
});
function replaceIt(e) {
$(this).html('now wait...');
$.post('options.php', {}, replaceItHandler, 'json');
}
function replaceItHandler(options) {
var select = '<select name="drinks">';
$.each(options, function(i, option) {
select += '<option value="' + option.data + '">' + option.label + '</option>';
});
select += '</select>';
$('#replaceMe').html(select);
}
<强> options.php 强>
<?php
$options[] = array('data' => 0, 'label' => 'Water');
$options[] = array('data' => 0, 'label' => 'Wine');
$options[] = array('data' => 0, 'label' => 'Beer');
$options[] = array('data' => 0, 'label' => 'Coke');
echo json_encode($options);
?>
很明显,您可以使用PHP或其他类似的JSON或发送整个选择,这是您的选择。
答案 2 :(得分:0)
在Safari上,问题是onclick事件应该是onchange。
请在此处查看解决方案:http://munteanutraian.info/forum/?p=5