ajaxを介して単一の選択ボックスオプションを遅延ロードする適切な方法

クリックしたときにのみ入力する必要がある選択ボックスがあります。関連するクエリには時間がかかりますので、ページに表示されている標準データから削除します。ajaxを介して単一の選択ボックスオプションを遅延ロードする適切な方法

私は、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のもので（サファリクロム）を選択すると、選択ボックスをクリックすると、空のドロップダウンボックスがajaxリクエストの前に表示され、レスポンス後にドロップダウンボックスはリフレッシュされません。選択したボックスの外側をクリックして、もう一度クリックすると、更新された「オプション」が表示されます。

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

** onfocusを試しても同じ結果が見つかりました。 onmouseoverは動作しますが、「使用不可」です。 onchangeは、初期状態では空である選択ボックスにより実行可能ではありません*

出典

2009-05-28 knoopx

あなたはこの1との同期要求を使用して考えがありますか？これは、タイムラグをなくし、選択ボックスに適切に更新するチャンスを与えます。また、なぜonclickベースの読み込みですか？ドロップダウンに達する前に、他のUI要素とのユーザーの対話に基づいて更新を実行することは可能ですか？選択が他のUI選択に依存しない場合は、事前に入力するのはなぜですか？ –

また、アフターシェントとして...非同期モードでも、DOM Readyのローディング機能を起動してみませんか？こうすることで、最初のページが長いクエリを実行せずにすぐに読み込まれ、ブラウザがフリーズしなくなります。ユーザーがUI要素を操作する準備が整うと、選択ボックスに静かに入力されます。 –

いくつかのアイデア：

は、標準的なHTML選択ボックスを使用しないでください - あなたのアプリケーションが正常eitherway低下することはありません。
は、いくつかのクリックジャッキングを使用してください - seletボックスOVER透明div要素を持っている - IE
使用checboxの問題を選択ボックスを移入し、なるだろう「非標準」の答えを、許可するようにクリッカブル（無効になっていません）
お気に入り：キャッシュクエリの結果が表示され、すぐに選択ボックスが表示されます。 AJAXを使ってオプションをリロードするために、選択ボックスの近くにもう一つの "referesh options"ボタンを押してください。いつものように

出典

2009-05-29 06:31:14 hegemon

新しいデータが表示されるのでキャッシュを破棄します。私はクリックジャックのハックに行くだろうが、それは汚れていると感じるので、私はちょうど標準のボタンを使用し、クリックした "新鮮な"選択ボックスに置き換えるつもりだと思う。 – knoopx

それを処理する唯一の方法は、全体の選択を置き換えているので、それが選択したオプションにこの読み取り専用のものを持っているので、ここで悪いブラウザは、以下の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); 
?>

とobviuslyよあなたはこのようなJSONまたはPHPを使用することができますまたは全体の選択を送信する、それはあなたの選択です。

出典

2009-05-29 06:50:50 coma

それはie8で働いていましたが、作業していない唯一のブラウザはWebkitベースのものでした（クロムとサファリ）。選択ボックス全体を置き換えることは考え方ですが、むしろボタンを表示し、クリックすると選択ボックスに置き換えられます。私は選択ボックスの内容を読み込むために余分なhtml要素を使いたくないのですが、標準HTML選択ボックスを使用している間は他の方法はないと思います。 – knoopx

は私のGoogle Chrome（1.0.154.65）でもOpera（ 9.64）でも動作していますが、1分前にテストしました。 – coma

Safariでは、問題はonclickイベントです。

はここに解決策を参照してください。http://munteanutraian.info/forum/?p=5

出典

2010-09-05 09:19:10 Traian

ajaxを介して単一の選択ボックスオプションを遅延ロードする適切な方法

答えて

関連する問題