【jQuery】変更したselectタグのhtml()を取得したい。

Question

jQueryのselect変更イベント時に、selectのhtmlそのものを取り出したいです。
optionのselectedが変更前の状態しか取得できません。
htmlの書換えがchangeイベントの後だからという仕様なのでしょうか？

選択したものがselectedとなっているhtmlを取得する方法はないでしょうか？

    // select変更イベント 
    $(document).on('change','select',function(){

        // 入力値（ここは変更後の値となっている。予想通りの動作。）
        var inputval = $(this).val();

        // selectタグのoptionは、変更前のoptionがselectedとなっている。
        // 選択したoptionがselectedとなっているhtmlが欲しい。
        var inputtag = $(this).parent().html();
    }

Comments

[m.ts10806]

HTMLもご提示ください。

Answer 1

optionのselectedが変更前の状態しか取得できません。

htmlの書換えがchangeイベントの後だからという仕様なのでしょうか？

いえ、HTMLに書かれたselectedは、あくまで初期値としての役割しかないからです。あとから選択を切り替えてもselectedは変化しませんし、逆にsetAttributeでselectedを書き換えても、選択が変化することもありません。

選択したものがselectedとなっているhtmlを取得する方法はないでしょうか？

標準では用意されていません。自分でHTMLを書き換えるぐらいしかないかと思います。

Answer 2

もしかしてスタティックにつけたselectedが任意に変更されると思っていますか？

<script>
$(function(){
  $(document).on('change','select',function(){
    var inputval = $(this).val();
    var inputtag = $(this).parent().html();
    console.log(inputtag);
  });
});
</script>
<div>
<select>
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>

optionのselectedは属性なのでchangeしても変わりません
あえてやるならこんな感じ

<script>
$(function(){
  $(document).on('change','select',function(){
    var inputval = $(this).val();
    $('option[selected]',this).attr('selected',null);
    $('option[value="'+inputval+'"]',this).attr('selected','selected');
    var inputtag = $(this).parent().html();
    console.log(inputtag);
  });
});
</script>
<div>
<select>
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>

Comments

[退会済みユーザー]

ありがとうございます。
属性なので、付け直せば良かったのですね。