innerHTML と属性の更新

Question

属性更新を含む文字列として HTML コードを取得しようとしています。

私は持っています select タグのオプションは JavaScript を使用して更新します。

デフォルトでは、最初の option は selected HTML 属性を使用する selected="selected".

設定を解除したら selected 最初のオプションから使用して option1.selected = false そしてセット option2.selected = true 2番目に option, を呼び出してから、 outerHTML の select, 、分かりました

<select>
    <option selected="selected">one</option>
    <option>two</option>
    <option>three</option>
  </select>

ご覧のように、 selected 属性はまだ最初にあります option, 、2番目に移動されましたが、 option. 。期待される結果は次のとおりです

<select>
    <option>one</option>
    <option selected="selected">two</option>
    <option>three</option>
  </select>

ここに例があります http://jsbin.com/adAbAMe/2/edit?html,js,コンソール,出力 （クリック run with js 結果を取得する) これは、 selected 属性は変更されましたが、HTML コードでは変更されません。

ただし、これを移動すると、属性が更新された最終的な HTML を、outerHTML から取得する必要があります。 select JavaScript を使用する前に行った更新はどこかで受け取れなくなります。

実際の属性値を含む文字列として HTML を取得する方法はありますか?

Answer 1

の selected 属性は自動的に更新されませんが、削除して適切な要素に追加するように設定できます。

//remove "selected" from first
if (i==0) {
  option.selected = false;
  option.removeAttribute("selected");
}

//add "selected" to second
if (i==1) {
  option.selected = true;
  option.setAttribute("selected", "selected");
}

これが実用的なフィドルです.

Answer 2

使用できます

option.setAttribute('selected', 'selected');

そして

option.removeAttribute('selected');

Answer 3

試す

$('button').click(function () {
    console.log($('select').prop('outerHTML'))
})

$('select').change(function(){
    $(this).find('option[selected]').removeAttr('selected');
    $(this).find('option:selected').attr('selected', 'selected');
})

デモ： フィドル

Answer 4

から DOM仕様:

選択された タイプの ブール値

対話型ユーザー エージェント内の、対応するフォーム コントロールの現在の状態を表します。この属性を変更すると、フォーム コントロールの状態が変わります。 ただし、要素の HTML selected 属性の値は変更されません。

(私のことを強調)

求めている効果を得るには、 option.setAttribute('selected', 'selected'), ただし、これも必要になります option.removeAtrribute('selected') 他のオプションについて。