プルダウンメニューセレクトボックスで選択した項目の初期値（表示内容）を入れたい。

前提・実現したいこと

プルダウンメニュー（セレクトボックス）で初期値として選択されている項目の
処理内容をページをロードした時点で表示しておきたい。

発生している問題・エラーメッセージ

しかし、ページをロードした段階では、項目は選択はされているが、処理が行われず
表示内容（#output1）が表示されない。

該当のソースコード

html
1<!DOCTYPE html>
2<html>
3
4<head>
5
6<meta charset="UTF-8">
7<meta name="viewport" content="width=device-width,initial-scale=1">
8
9<title>プルダウンメニューセレクトボックスで選択した項目の初期値（表示内容）を入れたい。</title>
10
11<script   src="https://code.jquery.com/jquery-1.12.4.min.js"   integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="   crossorigin="anonymous"></script>
12</head>
13
14<ul>項目テスト：
15	
16	<select id="a222" name="test">
17		<option value="A1">項目1</option>
18		<option value="A2" selected="selected">項目2</option>
19		<option value="A3">項目3</option>
20	</select>
21	
22</ul>
23
24<div id="output1"></div>
25
26<script type="text/javascript">
27	$('[name=test]').change (function() {
28			
29		    var k1 = $(this).val();
30					
31					switch (k1) {
32					  case "A1":
33					    $("#output1").html("項目１を選択");
34					    break;
35					  case "A2":
36					    $("#output1").html("項目２を選択");
37					    break;
38					
39					default:
40					    $("#output1").html("項目３を選択");
41					    break;
42					}
43					
44	});	
45</script>

試したこと

selected="selected"をつけてみたり、
koumoku1='A1'してみたりしてみました。

補足情報（FW/ツールのバージョンなど）

MAMP 5.2
osx 10.14 Safari バージョン12.0.2

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

回答2件

javascript
1<script>
2$(function(){
3  $('[name=test]').on('change',function() {
4    var list={"A1":"項目１を選択","A2":"項目２を選択","A3":"項目３を選択",};
5    $("#output1").html(list[$(this).val()]);
6  }).trigger('change');
7});
8</script>
9
10<ul>項目テスト：
11<select id="a222" name="test">
12<option value="A1">項目1</option>
13<option value="A2" selected="selected">項目2</option>
14<option value="A3">項目3</option>
15</select>
16</ul>
17
18<div id="output1"></div>

投稿2019/02/13 07:51

yambejp

総合スコア114742

bataman

2019/02/13 08:39

yambejpさんこんにちは無事に動きましたが、、ちょっと現状の私では var list={"A1":"項目１を選択","A2":"項目２を選択","A3":"項目３を選択",}; と (list[$(this).val()]); のあたりがよく分かりません、、 $(this)がA1,A2,A3の値で .val()が"項目２を選択"等の表示内容を list[]でセットにして表示させていると言う感じですかね？勉強になります！

yambejp

2019/02/13 10:01

listは対比表みたいなものです。形式はいわゆる連想配列的なオブジェクトですね。 listに参照値A1,A2・・・を与えるとその対比データが参照されるという流れです。そのあたりは実際にはどうでもよく $(セレクタ).on(イベント,コールバック).trgger(イベント) の書き方だけ理解してください初期動作させる定番の処理です

bataman

2019/02/14 04:10

こんにちは、初期動作の定番処理ありがとうございます！一度よく勉強してみます。

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

ベストアンサー

共通関数作っておいて呼び出すのが簡単といえば簡単ですね。

js
1$(function(){
2    selected($('[name=test]'));
3    
4    $('[name=test]').on ('change',function() {
5        selected($(this));
6    });
7});
8function selected(elem){
9    var k1 = elem.val();
10
11    switch (k1) {
12      case "A1":
13        $("#output1").html("項目１を選択");
14        break;
15      case "A2":
16        $("#output1").html("項目２を選択");
17        break;
18    default:
19        $("#output1").html("項目３を選択");
20        break;
21    } 
22}

投稿2019/02/13 07:50

m.ts10806

総合スコア80842

m.ts10806

2019/02/13 07:59

いずれにしても画面ロードを確実に関知させるために $(function(){ }); は必要です。

bataman

2019/02/13 08:44

mts10806さんこんにちは selected($(this)); で選択されている値A1とかを取得して、 selected(elem)でelem（これは名前）にA1を代入 k1に代入？みたいな感じなんでしょうか？シンプルで分かりやすい感じなのですが、まだ理解がおいついていませんがうまく動きました！

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

あなたの回答