2011-03-03 8 views
2

Google Chromeの9.0.597.107(公式には75357の構築) のWebKit 534.13 V8 2.5.9.15 ユーザーエージェントのMozilla/5.0(Windowsの; U; Windows NTの6.1; EN-US)ドロップダウンするjQueryの追加オプションのAppleWebKit /を534.13(GeckoのようなGecko)Chrome/9.0.597.107 Safari/534.13 JQuery:1.5.0Google Chromeの -

基本的に私の問題は次のとおりです。私は、Google Chromeのドロップダウンリスト(html select)を動的に更新する問題を抱えています。 HTMLは比較的単純であり、これは使用されているのjQueryのストリップダウンラインです:

($("<option />").val("test1").text("test2")).appendTo($("select[id*='SearchInput_Origin']")); 

または

$("select[id*='SearchInput_Origin']").append($("<option />").val("test1").text("test2")); 

**これは、$(文書)に現在ある

を.ready

基本的には、ドロップダウンオプションにオプションを追加するだけです。 FirefoxとIEでは完全に動作しますが、Google Chromeでは、ドロップダウンリストには、何かに集中したり、スクロールするなど、ページとやりとりするまでのオプションが表示されません。それの理由を見ることができません。

私はドロップダウンを移入された関数に警告を入れてきましたし、コードが実行されますが、Chromeは更新されません...非常に奇妙

誰もがこの前に遭遇していますか? 何が原因なのでしょうか?事前に

おかげで、 enigmab17

[編集#1]さらなる情報 はそれを調査してきたが、全くそれを把握することはできません。ページ上でイベントを発生させても、物理的に何かをクリックまたは移動するまでは何もしません。

解決策からすべてのコードを削除してHTMLページに埋め込んでください。クロムは正常に動作しますので、ページのレンダリングと何か関係があります。基本的にページはAJAXを介してレンダリングされています.Ajax経由でメインページにロードされるページが多数あります。

[編集#2] 非常に奇妙です。 は、基本的にはデフォルトで選択リストは次のようになります。

<select id="Select1" name="select1"> 
    <option value="-1">Default...</option> 
</select> 

そして、それは、上記のようにレンダリングします。すべてのオプションを削除して他のオプションを設定するコードはdoc.loadにあります。クロムの要素インスペクタをチェックすると、オプションが更新されたことが示されますが、クロムはこれらの変更を画面に表示しません。

ドロップダウンの下に標準的なハイパーリンクがあります。また、上にカーソルを置くと、更新されたオプションがchromeによってレンダリングされます。

答えて

0

私は次のコードを使用して、これをチェックしましたし、それが

<html> 
    <head> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.js"></script> 
    </head> 
    <body> 
     <select></select> 
    </body> 
    <script> 
     $(document).ready(function(){ 
      $("<option />").val("test1").text("test2").appendTo($("select")); 
     }); 
    </script> 
</html> 

私のために正常に動作しますが、あなたはこのコードを使用して、問題を再作成することができますか?

jsFiddle hereが見つかります。

更新日:

<select></select> 
<script> 
    $(document).ready(function(){ 
     $("<option />").val("test1").text("test2").appendTo($("select")); 
    }); 
</script> 

ajax.html

main.htmlを

<html> 
    <head> 
     <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/smoothness/jquery-ui.css" /> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.js"></script> 
     <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.js"></script> 
    </head> 
    <body> 
     <span class="button">Click to laod</span> 
     <div class="container"></div> 
    </body> 
    <script> 
     $(document).ready(function(){ 
      $("span.button").button().click(function(){ 
       $("div.container").load("ajax.html") 
      }); 
     }); 
    </script> 
</html> 

このサンプルを試してみてください、これはあなたのケースをシミュレートしていますか?

+0

いや、それは正常に動作し、同じ事をした私自身は、私がページにその自己をロードしています方法とは何かを持っている必要があります。 – Shane

+0

あなたのページに関連する情報をさらに掲載できますか? –

+0

まだ実際にはWeb上に存在しません。基本的にすべてのページは.NETによって動的に作成されます。メインページはそれを "Main.aspx"と呼び、ブックマークIDを介して渡されたフラグに応じて別々のサブページのすべてをロードします。 Main.aspx#InfoはInfoページをAJAX経由でメインページにロードします。だから私はこれがChromeのいくつかの問題を引き起こしていると仮定することができます... IE/Firefoxなどで完全に正常に動作します。 – Shane

0

問題が見つかりました。

基本的には、ドロップダウン/オプションは、XSLTトランスフォームを使用して作成される大きなフォームの一部でした。 2つの入力ラジオボタンがXSLTスタイルシートテンプレートを介してページ上に配置されていたので、テンプレートが入力を生成していたため、奇妙な理由でapppparently google chromeがこれを気に入らなかった。テンプレートの代わりに幾分面倒な見た目の選択タグに変換したらうまくいきました。今までにない不思議な問題! :D

@Arun Pジョニー支援のための 感謝:)

関連する問題