代码之家 › 专栏 › 技术社区 › knoopx

单击后通过ajax延迟加载单个选择框选项的正确方法

onclick webkit select ajax jquery

knoopx · 技术社区 · 17 年前

我已经实现了该功能 loadMyData(element, id)

事件绑定到元素,如下所示:

<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 回复 | 直到 17 年前

hegemon 17 年前

一些想法:

使用一些点击劫持-有一个透明的div OVER选择框-IE有问题
使用复选框允许“非标准”答案,这将填充选择框并使其可点击(未禁用)
我最喜欢的是:缓存查询结果并立即填充选择框。在选择框附近再提供一个“referesh options”按钮,通过AJAX重新加载选项。

coma 17 年前

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

<!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);
}

选项.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,也可以发送整个选择,这是你的选择。

Andro Selva Anand Wadhwani 13 年前

在Safari上,问题在于onclick事件,它应该是onchange。

请看这里的解决方案: http://munteanutraian.info/forum/?p=5