一旦点击,通过ajax延迟加载单个选择框选项的正确方法

时间:2009-05-28 15:06:21

标签: jquery ajax select webkit onclick

我有一个选择框,只有在点击时才应填充。涉及的查询需要很长时间,所以我从页面上显示的标准数据中取消它。

我已经实现了函数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不可行。*

3 个答案:

答案 0 :(得分:2)

一些想法:

  1. 不要使用标准的html选择框 - 您的应用程序也不会优雅地降级。

  2. 使用一些点击劫持 - 有一个透明的div OVER selet框 - IE的问题

  3. 使用checbox允许“非标准”答案,这将填充选择框并使其可点击(未禁用)

  4. 我的最爱:缓存查询结果并立即填充选择框。在选择框附近添加另一个“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