5

私はこのようなHTMLを持っています

<div id="foo">
<select>
<option> one </option>
</select>
</div>

私が使うとき

document.getElementById('foo').innerHTML = document.getElementById('foo').innerHTML.replace("<option> one </option>", "<option> two </option>") ;

innerHTMLは置き換えられますが、ブラウザには反映されません。

innerHTMLに警告すると、現在変更されていることがわかりますが、ブラウザーでは古いオプションが表示されます。

この変更をブラウザに認識させる方法はありますか？

前もって感謝します。

4

7 に答える 7

7

Firefox3.5では問題なく動作します

作業デモ

編集： IEを使用している必要があります。新しいオプションを作成して要素に追加するか、既存のオプションのテキストを修正する必要があります

動作デモ-FireFoxおよびIE7でテストおよび動作しています。

var foo = document.getElementById('foo');
var select = foo.getElementsByTagName('select');
select[0].options[0].text = ' two ';
于 2009-08-18T12:08:57.823 に答える
3

selectタグにIDを付け、新しいオプションを使用してアイテムを追加することをお勧めします。

var sel =document.getElementById ( "selectElementID" );
var elOptNew = document.createElement('option');
elOptNew.text = 'Insert' + 2;
elOptNew.value = 'insert' + 2;
sel.options.add ( elOptNew );

オプションを交換する必要がある場合

sel.options[indexNumber].text = 'text_to_assign';
sel.options[indexNumber].value = 'value_to_assign';
于 2009-08-18T12:08:29.993 に答える
3

selectのinnerHTMLを設定すると、IEにバグがあります。彼らがこれを7または8で修正したかどうかはまだわかりません。それはあなたがそれを与えるテキストのいくつかを切り落とし、したがって不正な形式のオプションを持っています。したがって、selectを含むouterHTMLを設定する必要があります。externalHTMLはIEのみ（または以前）であるため、通常はselect.parentNode.innerHTMLを使用します。そして、IDをselectに割り当てます。ただし、divのinnerHTMLを設定しているので、すでにカバーされています。それは単なる参考までです。

あなたの本当の問題は、replaceが最初の引数の正規表現を期待していることだと思います。または、オプション要素が期待したものではないこと。IEはオプション名を大文字にすることができ、選択した属性を追加している可能性があります。文字列の置換を試みる前に、innerHTMLに警告してそれが何であるかを確認する必要があります。次に、有効な正規表現を使用して置換を行います。おそらく、バックスラッシュでスラッシュをエスケープする必要があります。山かっこをエスケープする必要はないと思いますが、100％ではありません。

また、私の経験では、DOMメソッド（新しいオプション）は低速です。多数のオプションを置き換える必要がある場合は、大幅に遅くなります。1つまたは2つを置き換える必要がある場合は、DOMメソッドを使用できます。

于 2009-08-18T14:07:18.297 に答える
2

IEを使っていると思いますか？問題は、IEでSELECTを設定するには、新しいOption（...）を使用する必要があることです。このような：

document.getElementsByTagName('select')[0].options[0]=new Option(' two ');

編集：このバグに関するMicrosoftナレッジベースの記事があります：http ：//support.microsoft.com/kb/276228

于 2009-08-18T12:07:26.750 に答える
1

私が考え出した解決策は次のとおりです 

strHTML = "&nbsp;<option value=""1"">Text1</option>"
strHTML = strHTML + "<option value=""15"">Text2</option>"
strHTML = strHTML + "<option value=""17"">Text3</option>"


document.getElementById("id-selectbox").innerHTML=strHTML;
if(Browser=="Internet Explorer"){
    document.getElementById("id-selectbox").outerHTML=document.getElementById("id-selectbox").outerHTML;
}

HTML文字列は、AJAXリクエストによって取得できます。

その結果、ブラウザは新しく追加されたオプションを使用して選択ボックスを書き換え/レンダリングします。

次の点に注意してください。＆nbspが最初のオプションコードを削除するこれを省略すると、最初のオプションはオプションタグを失い、新しく追加されたselect-innerHTMLに表示されなくなります。

于 2010-08-18T14:23:17.617 に答える
0

replace最初の引数としてRegExが必要なものを使用しています。

これを試して：

document.getElementById('foo').innerHTML = document.getElementById('foo').innerHTML.replace(/<option> one <\/option>/, "<option> two </option>");

これはあなたのために働きますか？

于 2009-08-18T13:26:51.207 に答える
0

これをチェックして

document.getElementById('foo').innerHTML.replace("<option> one </option>", "<option> two </option>") ;

動作しない場合は、ブラウザを変更してください。

于 2009-08-19T09:39:41.050 に答える