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リクエストの前に空のドロップダウンボックスが表示され、応答後にドロップダウンボックスが更新されません。更新された「オプション」を表示するには、選択ボックスの外側をクリックしてもう一度クリックする必要があります。

コンテンツを強制的に更新する方法はありますか？または、最初の1つを自動的に選択して、ドロップダウンボックスを非表示にしますか？

** onfocusを試したところ、同じ結果が見つかりました。onmouseoverは機能しますが、「使用できません」。選択ボックスが初期状態で空であるため、onchangeは実行できません。*

4

3 に答える 3

2

いくつかのアイデア：

  1. 標準のhtml選択ボックスを使用しないでください。どちらの場合も、アプリケーションは正常に劣化しません。

  2. クリックジャッキングを使用する-透明なdivOVERセレットボックスを使用する-IEの問題

  3. checboxを使用して、「非標準」の回答を許可します。これにより、選択ボックスにデータが入力され、クリック可能になります（無効化されません）。

  4. 私のお気に入り：クエリ結果をキャッシュして、すぐに選択ボックスに入力します。選択ボックスの近くに別の「参照オプション」ボタンを指定して、AJAXを介してオプションを再ロードします。

于 2009-05-29T06:31:14.507 に答える
1

いつものように、ここでの悪いブラウザはIE 6以下です。これは、選択オプションにこの読み取り専用のものがあるため、それを処理する唯一の方法は選択全体を置き換えることです。

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を使用するか、選択全体を送信することができます。それはあなたの選択です。

于 2009-05-29T06:50:50.350 に答える
0

Safariでは、問題はonclickイベントであり、onchangeである必要があります。

ここで解決策を参照してください：http：//munteanutraian.info/forum/？p = 5

于 2010-09-05T09:19:10.917 に答える