お世話になります。
フォーム系のページの作成で行き詰まった事がありましたのでご質問させてください。

あるフォームで各項目に対して入力をおこない次のページに遷移します。
そして遷移先から元のページに戻った際、一度入力したセレクトボックスや
プルダウンボックスに対して初期値やすでに選択した値を保持して再表示したい場合があるかと思います。

今回、動的に値を取得するプルダウン項目（option要素）に対して
表示値や設定値を取得する際に選択した項目に対しての設定（selected）が
うまく反映できなくてご相談させていただきました。

jqueryを使用して下記のようにoption要素に対して表示値、入力値を生成していきます。

// value値、テキストを指定して生成
$("#select_test").append($("<option>").val(hogeCd).text(hogeName));

ここまでは反映できたのですが、別途、選択した状態をさらに反映しようとするとなかなかうまく反映してくれません。
調べてみると

htmlでいうと、このように反映するようにしたいのです。

<select id="select_test">
　　　<option value="1" selected="selected">選択肢１</option>
</select>

この
selected="selected"
の部分をjqueryを使用して入力値の生成を行うタイミングで反映したいのですが

// value値、テキストを指定して生成
$("#select_test").append($("<option>").val(hogeCd).text(hogeName));

こちらのような記述で「selected="selected"」の部分を反映するような方法はございますでしょうか。

お力いただけますと幸いでございます。よろしくお願いいたします。

kei344

2018/08/30 16:17

（質問文は編集できます）質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

dnnd

2018/08/30 16:31

申し訳ありません。ありがとうございます。訂正させていただきました。見やすくなりますね。

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

回答2件

ベストアンサー

$()でDOMを生成するときに第2引数をkey:valueの形式で指定すると属性をつけられるので、selected:trueのつけるだけで良いかと。

js
1$(function(){
2    $("#select_test").append($("<option>",{selected:true,val:"1",text:"いち"}));
3    $("#select_test").append($("<option>",{val:"2",text:"に"}));
4})

結果：

html
1<select id="select_test">
2  <option selected="selected" value="1">いち</option>
3  <option value="2">に</option>
4</select>

text,valもついでに突っ込んでおきました。

【jQuery】DOM要素の生成

投稿2018/08/30 21:41

m.ts10806

総合スコア80850

dnnd

2018/09/03 03:21

ご回答ありがとうございます。意図していた動作が実現できました。ご丁寧なご回答、ありがとうございました。

m.ts10806

2018/09/03 04:06

解決されたようで何よりです。DOM生成時の第2引数オプション指定は便利なのでご活用ください。

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

サンプルコード

html
1<!DOCTYPE HTML>
2<html lang="ja">
3	<head>
4		<meta charset="UTF-8">
5		<title></title>
6	</head>
7	<body>
8		<select name="select">
9		</select>
10
11		<script type="text/javascript" src="//code.jquery.com/jquery-3.1.1.min.js"></script>
12		<script type="text/javascript">
13			$(function () {
14				var arr = {
15					0: 'text0',
16					1: 'text1',
17					2: 'text2',
18					3: 'text3'
19				};
20				$.each(arr, function (i, row) {
21					var option = $('<option>');
22					console.log(i);
23					option.val(i).text(row).appendTo($("[name=select]"));
24				});
25				$("[name=select]").val(3);
26			});
27		</script>
28	</body>
29</html>