1

私は基本的なリストを持っています：

<select id = "opt">
  <option value="a">a</option>
  <option value="b">b</option>
  <option value="c">c</option>
</select>

ここで、JS で選択した項目を変更する必要があります。完了したら、この選択項目 ( .innerHTML) の内容が必要です。しかし悲しいことに、innerHTML は何も選択されていないと言っています...これを修正するにはどうすればよいですか?

編集：ここにコードがあります：

for (var count = 0; count < document.getElementById('opt').childNodes[0].options.length; count++)
{
 if (document.getElementById('opt').childNodes[0].options[count].value == 7) { document.getElementById('opt').childNodes[0].options[count].selected = true; break; }
}
var obj = document.getElementById('opt');
alert (obj.innerHTML);

alert()元の HTML コードを表示するだけです

4

3 に答える 3

2

あなたはそのようにこれを行うことができます

var opt = document.getElementById("opt");
var listLength = opt.options.length;
for(var i =0; i< listLength; i++) {
   if(opt.options[i].selected) {
      opt.options[i].textContent = 'the change HTML';
   }
}

デモ

于 2012-04-22T11:57:57.480 に答える
2

オプションをまったく使用せずにこれを行うこともできます。

要素のノードを解析するだけです

for (var count = 0; count < document.getElementById('opt').childNodes.length; count++)
{
    if (document.getElementById('opt').childNodes[count].value == "c") {       
        document.getElementById('opt').childNodes[count].selected = true; break; 
    }
}
var obj = document.getElementById('opt');
alert (obj.innerHTML);

ここにあなたの作業中の jsfiddle があります: http://jsfiddle.net/9Pg8n/1/

于 2012-04-22T12:06:46.430 に答える
0

次のように、選択したオプションからテキストと値を読み取ることができます。

var elem=document.getElementById('opt');
var value=elem[elem.selectedIndex].value;
var text=elem[elem.selectedIndex].text;

選択した要素の HTML が本当に必要な場合option:

var text=elem[elem.selectedIndex].outerHTML;

を覗いてみると、IEでは属性が見えますが、他selectのブラウザではプロパティの変更が反映されていないようです。これも意味があります。innerHTMLselectedoption.outerHTML

これを修正するには、属性を手動で設定する必要があります。

elem[elem.selectedIndex].setAttribute('selected','true');

innerHTMLただし、これはIE の -value には影響しないため、他のブラウザーではわずかに異なる HTML が表示されます。

<OPTION selected ...> // IE
<OPTION selected="true"...> // Other browsers

残念ながら、選択した要素を変更しても、この設定属性は残ります。したがって、使用後に属性を削除する必要があります。

elem[elem.selectedIndex].removeAttribute('selected');

しかし...これはChromeで問題を引き起こします.-1から戻りますelem.selectedIndex. 属性を設定する前に変数にを保存してからselectedIndex、正しい選択を再度設定する必要があります。

elem[stored_index].selected=true;
于 2012-04-22T13:16:29.130 に答える