select (multiple) 要素を jQuery で selected にするときの注意

multiple の select 要素の option を、jQuery を使って selected にしたい時。

(※注 これは失敗するコードです)

$('#btnon01').on('click', function()
{
	$('#opt01').attr('selected', true);
});

$('#btnoff01').on('click', function()
{
	$('#opt01').attr('selected', false);
});

この場合、「selectedに」 → 「外す」 → 「selected に」
とすると、2回目の「selected に」以降、デバッガーでソースを見る限り selected="selected" は入りますが、実際には効きません。
もちろん POST でも飛んで行きません。

正解としてはこうです。

$('#opt01').prop('selected', true);
...
$('#opt01').prop('selected', false);

checkbox 同様 prop を使えということでした。
(※ただ、この場合は、デバガーで見ても selected="selected" は入りません。挙動そのものは問題ないのですが)

とりあえず、備忘録として。
また、jQuery を使わない際の挙動の検証もしたいと思います。

ジャンル： Web