3

我有一个选择框，仅在单击时才应填充。所涉及的查询需要很长时间，因此我将其从页面上显示的标准数据中分离出来。

我已经实现了执行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 不可行，因为选择框在其初始状态下为空。*

4

3 回答 3

2

一些想法：

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

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

  3. 使用复选框来允许“非标准”答案，这将填充选择框并使其可点击（未禁用）

  4. 我最喜欢：缓存查询结果并立即填充选择框。在选择框附近提供另一个“引用选项”按钮以通过 AJAX 重新加载选项。

于 2009-05-29T06:31:14.507 回答
1

像往常一样，这里的坏浏览器是 IE 6 及更低版本，因为它在选择选项上有这个只读的东西，所以处理它的唯一方法是替换整个选择。

索引.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>

脚本.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);
}

选项.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 或发送整个选择，这是您的选择。

于 2009-05-29T06:50:50.350 回答
0

在 Safari 上，问题是它应该是 onchange 的 onclick 事件。

在这里看到解决方案：http ://munteanutraian.info/forum/?p=5

于 2010-09-05T09:19:10.917 回答