ExpressでHTMLのselectのoptionをページ読み込み時に動的にoptionをselectedにしたいですができません。
できればjqueryは使わない方向でいきたいです。
a.js

javascript
1
2function select_checked() {
3    select = document.getElementById('edit').options;
4    for(let i = 0; i < select.length; i++ ){
5        if(select[i].value === 'Normal'){
6            select[i].selected = true;
7            break;
8        }
9    }
10}

HTML
1<select id="edit" name="a" onload="select_checked()">
2    <option value="High">High</option>
3    <option value="Normal">Normal</option>
4    <option value="Low">Low</option>
5</select>

onloadはSelectにはサポートされていないとのことでここを変える必要があると思うのですが、ページ読み込み時に動的にoptionをselectedにするにはどうすればいいですか？
また、他にも間違っているところはありますか？

よろしくお願いします。

x_x

2018/04/27 02:57

HTML内にselected属性で書けば簡単ですが、スクリプトでしたいのですか？

Nippun

2018/04/27 02:59

できればスクリプトに書きたいのですがどちらでも大丈夫です

m.ts10806

2018/04/27 03:20 編集

htmlのselectedで初期値を決めるのとjavascriptで設定するのとでは目的が違ってきたりするのですが、これで解決で良かったのでしょうか。

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

回答5件

(function(global) {
  
	var Select = (function() {

		var $select;
		var $options;
		
		function init() {
			$select = document.getElementById('edit');
			$options = $select.options;
      
			Array.prototype.forEach.call($options ,function($option) {
        			if ($option.value === 'Normal') {
          				$option.selected = true;
        			}
			})
		}
		
		return {
			init: init
		}
		
	})();
  
	document.addEventListener("DOMContentLoaded", function() {

		Select.init();
		
	});

})(window);

今回のように特に画像やスタイルシートの読み込みを待つ必要もないケースでは、onloadイベントではなくDOMContentLoadedイベントを使うのが適切だと思います。

※ 尚、DOMエレメントを代入する変数に$を付けているのは、jQueryコミュニティーでjQueryオブジェクトを入れる変数には$をつけるといった命名ルールを採用している人たちがいるので、それに習っているかたちです。$自体に意味はありません。jQuery使っている時の癖なので気にしないでください。

参考

DOMContentLoaded

DOMContentLoaded イベントは、最初のHTMLドキュメントの読み込みと解析が完了した時に発火し、スタイルシートや画像、サブフレームの読み込みが終わるのを待ちません。

DOMContentLoadedイベントとloadイベントの違い[タイミング]

補足

<select id="edit" name="a" onload="select_checked()">
    <option value="High">High</option>
    <option value="Normal" selected>Normal</option>
    <option value="Low">Low</option>
</select>

初期表示時にデフォルトの選択項目を指定したいのであれば、HTML側でやれば良いだけの話で動的に変える必要はないと思います。

投稿2018/04/27 03:10

編集2018/04/27 03:29

HayatoKamono

総合スコア2415

ベストアンサー

onloadは各エレメントではなくbodyとかにつけるものだと思います。

html
1<body onload="select_checked()">

もしくはwindow.onloadですね。

html
1<select id="edit" name="a">
2    <option value="High">High</option>
3    <option value="Normal">Normal</option>
4    <option value="Low">Low</option>
5</select>

js
1window.onload = function() {
2    select = document.getElementById('edit').options;
3    for(let i = 0; i < select.length; i++ ){
4        if(select[i].value === 'Normal'){
5            select[i].selected = true;
6            break;
7        }
8    }
9}

JavaScriptの「onloadイベント」でハマりやすい罠をまとめてみた！

投稿2018/04/27 02:51

m.ts10806

総合スコア80850

Nippun

2018/04/27 03:37 編集

はい、これで動きました。ありがとうございます。

m.ts10806

2018/04/27 03:59

次からで結構なのですが、目的部分を明示されたほうが良いかもしれません。追記修正依頼にも書きましたが「これでいいのかな？」と回答の方向性が定まりづらい質問内容となっています。

Nippun

2018/04/27 18:32

分かりました。気をつけるようにします。

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

一応、動きますが・・

html
1<HTML>
2<head>
3  <script>
4  function select_checked() {
5    select = document.getElementById('edit').options;
6    for(let i = 0; i < select.length; i++ ){
7        if(select[i].value === 'Low'){
8            select[i].selected = true;
9            break;
10        }
11    }
12  }
13  </script>
14</head>
15<body onload="select_checked()">
16<select id="edit" name="a" onload="select_checked()">
17    <option value="High">High</option>
18    <option value="Normal">Normal</option>
19    <option value="Low">Low</option>
20</select>
21</body>
22</HTML>

投稿2018/04/27 02:49

退会済みユーザー

総合スコア0

退会済みユーザー

2018/04/27 02:54

あ、すいません。selectにonloadつけてたんですね。 selectのonload消して、bodyのonloadだけで大丈夫です。

Nippun

2018/04/27 03:01

body以外にもdivとかにもつけても問題ないですか？

退会済みユーザー

2018/04/27 03:03

body以外は無視されます。 bodyのonloadの関数内でselectもdivも処理するという方法しかありません。

Nippun

2018/04/27 03:06

ありがとうございます。

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

https://developer.mozilla.org/ja/docs/Web/HTML/Element/option

HTML
1<select id="edit" name="a">
2    <option value="High">High</option>
3    <option value="Normal" selected>Normal</option>
4    <option value="Low">Low</option>
5</select>

投稿2018/04/27 03:03

x_x

総合スコア13749

js
1window.onload = function() {
2	select_checked();
3};

を追加すれば動くと思います。

投稿2018/04/27 02:50

編集2018/04/27 02:51

kszk311

総合スコア3404

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

Express: HTMLのselectのoptionを動的にselectedにしたい

参考

補足

関連した質問