jQueryで要素の論理属性の作成

jQueryで

jquery
1$('<option>', {value: '1', text: 'aaa'});

と書けば

html
1<option value="1">aaa</option>

という要素が生成されますが

html
1<option value="1" selected>aaa</option>

という要素を生成する書き方はありますでしょうか？

追記です。
回答ありがとうございます。

html
1<option value="1" selected="selected">aaa</option>

という要素ではなく

html
1<option value="1" selected>aaa</option>

という要素を作ることは可能でしょうか？

以下、確認で使ったhtml

html
1<!DOCTYPE html>
2<head>
3<title>動作確認</title>
4<script src="jquery-2.2.4.js"></script>
5</head>
6
7<body>
8<select id="theid">
9</select>
10
11<script type="text/javascript">
12$( function() {
13    // hwatarigさん
14    var wk = $("<option>", { value: "1", text: "aaa", selected:true });
15    $('#theid').append(wk);
16
17    // yambejpさん その1
18    $('<option>', {value: '1', text: 'aaa',selected:'selected'}).appendTo('select');
19
20    // yambejpさん その2
21    $('<option>').attr({value: '1', text: 'aaa',selected:'selected'}).appendTo('select');
22
23    console.log($('select').html());
24} );
25</script>
26</body>
27</html>

maisumakun

2020/03/10 12:36

なぜ「selected="selected"」ではだめなのでしょうか？

study_web

2020/03/12 12:00

短く書ける場合は、短く書いたほうが、可読性が高いからです。

maisumakun

2020/03/12 12:07

それは、JavaScriptの可読性を落としてまで追い求める必要がありますか？

study_web

2020/03/12 12:11

JavaScriptの可読性を下げずに selected にはできないとういことでしょうか？ jQueryで簡単にできれば一番いいのですが

maisumakun

2020/03/12 12:21

> jQueryで簡単にできれば一番いいのですが jQueryは歴史的経緯もあって、論理属性に特殊な処理を加えているので、生DOMが必要になります。

study_web

2020/03/12 12:28

なるほど、jQueryでは簡単にできないのですね。ありがとうございました。

行動規範の内容に同意します

回答3件

$("<option>", { value: "1", text: "aaa", selected:true }
で良いかと。
（記載されているコードだけで要素は生成されないと思いますが、append()などを省略しているものとして回答しました。）

投稿2020/03/08 12:44

hwatarig

総合スコア461

ベストアンサー

追記です。

ここについてですが、selected="selected"とselectedだけのは、意味的に同じです。わざわざ作り分ける意味は通常ありません。

投稿2020/03/10 12:32

編集2020/03/10 12:36

maisumakun

総合スコア146018

maisumakun

2020/03/12 12:08 編集

いちおう、jQueryではなく生DOMで.setAttribute('selected', '')のようにすれば作れなくはないですが、動的に生成するHTMLの表記にこだわる（動作上は何も変わらない）ために、JavaScriptコードの可読性を落とすことになり、メリットはありません。

maisumakun

2020/03/12 12:22

jQueryを使った場合、.attr('selected', '')とセットしようとしても、selected="selected"としかできません。 https://github.com/jquery/jquery/blob/master/src/attributes/attr.js#L123

行動規範の内容に同意します

ようはattrで処理するようなものですよね？

$('<option>', {value: '1', text: 'aaa',selected:'selected'}).appendTo('select');

$('<option>').attr({value: '1', text: 'aaa',selected:'selected'}).appendTo('select');

投稿2020/03/09 03:13