1

別の選択から駆動する必要がある動的選択がありますが、IEで（IE9を使用して）動作させることができないようです。私はこの投稿をここで見ましたが、（理解していない限り）これは役に立たなかったようです: Dynamic Related Selects with jQuery, not work in IE。

問題を理解しやすいように、非常に単純化しました。2 つの選択があり、1 つはもう一方を駆動します。つまり、最初のもので何かを選択すると、2 番目のものは変化します。この例では、select に新しい項目を追加しているだけですが、これでも IE では機能しません。

var mydiv = $("#testdiv");
$("<select id='f1'>").appendTo(mydiv);
$("<select id='f2'>").appendTo(mydiv);
$("#f1").append("<option value='1'>1</option>");
$("#f1").append("<option value='2'>2</option>");
$("#f2").append($("<option>").attr("value", "n"));
$("#f1").change(function () {
    $("#f2").append("<option value='t1'>t1</option>");
});

<div id="testdiv"></div>

したがって、理論的には、2 つの選択リストから開始する必要があり、「f2」はその中の 1 つの空白のオプションになります。

次に、「f1」から項目を選択すると、「f2」に新しいオプションが追加されます。

これは、firefox と chrome で希望どおりに機能します。IE では、奇妙な動作をするだけです。IE で次の例を見てみましょう。

シナリオ 1

  1. ページを開き、「f2」の選択を確認します。空白の値が 1 つある
  2. 「f1」で項目を選択
  3. 「f2」を確認すると、まだ空白の値が 1 つあります

シナリオ 2

  1. ページを開き、「f2」選択に触れません。
  2. 「f1」で項目を選択
  3. 「f2」にチェックを入れると、2項目あります！
  4. 「f1」で別の項目を選択します
  5. 「f2」をチェックすると、まだ2つのアイテムがあります?!?

そのため、選択コントロールを初めてアクティブ化するときに、既存の HTML で何かを行う必要があるように見えます...そして、ここからレンダリングするのはそれだけです...

これは私を夢中にさせています、私は何を間違っていますか?!?

注: 問題があるかどうかはわかりませんが、非同期呼び出しが完了するまで値がわからないため、両方の選択が javascript/jquery を使用して動的に生成されます。

コメントによる調査により、質問が更新されました...オブジェクトの動的作成に関する私の最後のメモは、問題を再現するために重要だったようです

4

5 に答える 5

8

別の簡単な回避策を発見しました。

append() または html() を使用して動的に作成された選択のオプションを設定し、選択を単に hide() および show() します。

var mydiv = $("#testdiv");
$("<select id='f1'>").appendTo(mydiv);
$("<select id='f2'>").appendTo(mydiv);
$("#f1").append("<option value='1'>1</option>");
$("#f1").append("<option value='2'>2</option>");
$("#f2").append($("<option>").attr("value", "n"));
$("#f1").change(function () {
    $("#f2").append("<option value='t1'>t1</option>").hide().show();
});

<div id="testdiv"></div>
于 2013-04-16T14:05:24.777 に答える
1

理解した。いくつかの Web サイトで、IE の select に関するいくつかのバグと、回避策として div を使用しなければならないことについて読んでください。したがって、解決策は、リストを更新するたびに div に html を再投稿することです。このようなもの：

var mydiv = $("#testdiv");
var mydiv2 = $("#testdiv2");
$("<select id='f1'>").appendTo(mydiv);
$("<select id='f2'>").appendTo(mydiv2);
$("#f1").append("<option value='1'>1</option>");
$("#f1").append("<option value='2'>2</option>");
$("#f2").append($("<option>").attr("value", "n"));
$("#f1").change(function () {
    var tempdiv = $("<div>");
    $("#f2").append("<option value='t1'>t1</option>");
    $("#f2").appendTo(tempdiv);
    $("#testdiv2").html($(tempdiv).html());
});

...

<div id="testdiv"></div>
<div id="testdiv2"></div>

重要な部分は「testdiv2」であり、「tempdiv」からの html を入力します。これを行うにはもっときちんとした方法かもしれませんが、当面は上記の方法でうまくいきます。jsfiddler の実用的なソリューションは次のとおりです: http://jsfiddle.net/VHPt5/4/

アップデート

また、以下の別の回答で@Ingenatorのコメントに投稿されたものと同じことを達成するためのわずかに異なる方法。次のように HTML を置き換えるのではなく、

$("#f2").appendTo(tempdiv);
$("#testdiv2").html($(tempdiv).html());

元の div をクリアして再追加できます。

$("#testdiv2").clear();
$("#f2").appendTo($("#testdiv2"));

最終的には同じ解決策ですが、最初の div の html を置き換えるために tempdiv を生成する必要がなくなります。

ここでの解決策: http://jsfiddle.net/cAr57/3/

于 2012-05-14T14:58:31.400 に答える
0 
    $(document).ready(function () {
        $("#fieldtype1").append($('<option />', { 'text': 'n', 'value': 'n' }));

        $("#field1").on('change', function () {
            $("#fieldtype1").html('');

            var data = [{ 'name': '1', 'value': '1' }, { 'name': '2', 'value': '2' }, { 'name': '3', 'value': '3' }, { 'name': '4', 'value': '4'}]

            $.each(data, function (i, entity) {
                $("#fieldtype1").append($('<option />', { 'text': entity.name, 'value': entity.value }));
            });

            $("#fieldtype1").trigger('change');
        });
    });



<select id="field1">
    <option value="2">2</option>
    <option value="4">4</option>
</select>
<select id="fieldtype1">
</select>
于 2012-05-14T12:49:33.563 に答える
-1

IE で動作しない理由は、select 要素を select 要素に挿入しようとしているためです。これは理にかなっています。select タグだけを新しいオプションに追加しないようにしてください。

<td>
<select id='dinamicSelect'>
    <option value='2'>dinamicOption1</option>
    <option value='4'>dinamicOption2</option>
</select>
</td>

そしてjquery

$('#dinamicSelect').html("<select><option value='123'>newOption</option></select>"); //won't work on IE

$('#dinamicSelect').html("<option value='123'>newOption</option>"); //Works

お役に立てれば。

于 2013-06-05T17:48:10.237 に答える