jQuery セレクトボックスで値を指定できない

前提・実現したいこと

ある箇所を押したら、セレクトボックスなどがあるダイアログが出てきて、
セレクトボックスはある値が選択された状態にしたいです。

該当のソースコード

HTML
1<div class="change-dialog">
2  <div class="dialog-header">
3    <span class="dialog-title">予定変更</span>
4    <button type="button" class="dialog-close">
5      閉じる☓
6    </button>
7  </div>
8  <div class="dialog-content">
9    <select id="dialog-year" name="dialog-year">
10      <option value="default">年を選択</option>
11      <option value="2018">2018年</option>
12      <option value="2019">2019年</option>
13      <option value="2020">2020年</option>
14      <option value="2021">2021年</option>
15      <option value="2022">2022年</option>
16      <option value="2023">2023年</option>
17      <option value="2024">2024年</option>
18      <option value="2025">2025年</option>
19      <option value="2026">2026年</option>
20      <option value="2027">2027年</option>
21      <option value="2028">2028年</option>
22      <option value="2029">2029年</option>
23    </select>
24
25    <select id="dialog-month" name="dialog-month">
26      <option value="default">月を選択</option>
27      <option value="1">１月</option>
28      <option value="2">２月</option>
29      <option value="3">３月</option>
30      <option value="4">４月</option>
31      <option value="5">５月</option>
32      <option value="6">６月</option>
33      <option value="7">７月</option>
34      <option value="8">８月</option>
35      <option value="9">９月</option>
36      <option value="10">１０月</option>
37      <option value="11">１１月</option>
38      <option value="12">１２月</option>
39    </select>
40    <select id="dialog-date" name="dialog-date">
41    </select>
42
43    <div id="dialog-hours">
44     <select id="start-hour" name="start-hour">
45      <option value="default">開始</option>
46      <option value="0">00</option>
47      <option value="1">01</option>
48      <option value="2">02</option>
49      <option value="3">03</option>
50      <option value="4">04</option>
51      <option value="5">05</option>
52      <option value="6">06</option>
53      <option value="7">07</option>
54      <option value="8">08</option>
55      <option value="9">09</option>
56      <option value="10">10</option>
57      <option value="11">11</option>
58      <option value="12">12</option>
59      <option value="13">13</option>
60      <option value="14">14</option>
61      <option value="15">15</option>
62      <option value="16">16</option>
63      <option value="17">17</option>
64      <option value="18">18</option>
65      <option value="19">19</option>
66      <option value="20">20</option>
67      <option value="21">21</option>
68      <option value="22">22</option>
69      <option value="23">23</option>
70     </select>
71      <p class="dialog-minute">:00 ～ </p>
72     <select id="end-hour" name="end-hour">
73      <option value="default">終了</option>
74      <option value="1">01</option>
75      <option value="2">02</option>
76      <option value="3">03</option>
77      <option value="4">04</option>
78      <option value="5">05</option>
79      <option value="6">06</option>
80      <option value="7">07</option>
81      <option value="8">08</option>
82      <option value="9">09</option>
83      <option value="10">10</option>
84      <option value="11">11</option>
85      <option value="12">12</option>
86      <option value="13">13</option>
87      <option value="14">14</option>
88      <option value="15">15</option>
89      <option value="16">16</option>
90      <option value="17">17</option>
91      <option value="18">18</option>
92      <option value="19">19</option>
93      <option value="20">20</option>
94      <option value="21">21</option>
95      <option value="22">22</option>
96      <option value="23">23</option>
97      <option value="24">24</option>
98     </select>
99      <p class="dialog-minute">:00</p>
100    </div>
101
102    <p style="padding:0;margin:0;">件名</p>
103    <input id="eventName" type=text size=30px>
104    <div style="float:right;margin-top:10px;">
105        <button id="changeEvent">変更</button>
106        <button id="deleteEvent">削除</button>
107    </div>
108  </div>
109</div>
110
111```JavaScript
112$("#id名").on("click",".クラス名",function(event){
113  var target = $(event.target);
114  eventText = target.text();
115
116  if(eventText === ""){
117    return;
118  }else if(eventText !== ""){
119    //leftの値 = (ウィンドウ幅 -コンテンツ幅) ÷ 2
120    var leftPosition = (($(window).width() - $(".change-dialog").outerWidth(true)) / 2);
121    //CSSを変更
122    $(".change-dialog").css({"left": leftPosition + "px"});
123    //ダイアログを表示する
124    $(".change-dialog").show();
125
126      //イベント情報表示
127      var getarr = localStorage.getItem(eventText);
128      var getjson = JSON.parse(getarr);
129      var year = getjson[0];
130      var month = getjson[1];
131      var date = getjson[2];
132      var start = getjson[3];
133      var end = getjson[4];
134
135
136      $("#dialog-year").val(year);
137      $("#dialog-month").val(month);
138      $("#dialog-date").val(date);
139      $("#start-hour").val(start);
140      $("#end-hour").val(end);
141      $("#eventName").val(eventText);
142
143  }
144
145
146});
147
148
149### 試したこと
150
151alert(year);などで確認したところ、
152値は取得できているみたいです。
153jsの最後のところで各セレクトボックスに値をセットするよう記述してもなりません。
154### 補足情報（FW/ツールのバージョンなど）
155
156ブラウザ：chrome

m.ts10806

2018/10/02 20:59

JavaScriptのコードもマークダウンのcode機能を利用してください。codeによるコードブロックは幾つでも設置できます。

m.ts10806

2018/10/02 21:02

$("#id名").on("click",".クラス名",function(event){　←ここは実際のコードを入れられたほうが良いかと。これだけでは再現確認ができませんので。あとご利用のjQueryのバージョンもご提示ください。

x_x

2018/10/03 00:56

getjson取得後にconsole.log(getjson);として結果を見てもらえますか？

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

回答1件

ざっと見た感じ、仕様がわからないlocalstrageとjson処理以外はできているように見えますが

javascript
1$(function(){
2  $("#main .txt").on("click",function(e){
3    eventText = $(this).text();
4    $(".change-dialog").attr('open','open');
5    var year="2019";
6    var month="2";
7    var date="15";
8    var start="8";
9    var end="15";
10    $("#dialog-year").val(year);
11    $("#dialog-month").val(month);
12    $("#dialog-date").val(date);
13    $("#start-hour").val(start);
14    $("#end-hour").val(end);
15    $("#eventName").val(eventText);
16  });
17  $('.dialog-close').on('click',function(){
18    $(this).closest('.change-dialog').attr('open',null);
19  });
20});

HTML
1<div id="main">
2<div class="txt">sample text</div>
3<dialog class="change-dialog">
4  <div class="dialog-header">
5    <span class="dialog-title">予定変更</span>
6    <button type="button" class="dialog-close">
7      閉じる?
8    </button>
9  </div>
10  <div class="dialog-content">
11    <select id="dialog-year" name="dialog-year">
12      <option value="default">年を選択</option>
13      <option value="2018">2018年</option>
14      <option value="2019">2019年</option>
15      <option value="2020">2020年</option>
16      <option value="2021">2021年</option>
17      <option value="2022">2022年</option>
18      <option value="2023">2023年</option>
19      <option value="2024">2024年</option>
20      <option value="2025">2025年</option>
21      <option value="2026">2026年</option>
22      <option value="2027">2027年</option>
23      <option value="2028">2028年</option>
24      <option value="2029">2029年</option>
25    </select>
26
27    <select id="dialog-month" name="dialog-month">
28      <option value="default">月を選択</option>
29      <option value="1">１月</option>
30      <option value="2">２月</option>
31      <option value="3">３月</option>
32      <option value="4">４月</option>
33      <option value="5">５月</option>
34      <option value="6">６月</option>
35      <option value="7">７月</option>
36      <option value="8">８月</option>
37      <option value="9">９月</option>
38      <option value="10">１０月</option>
39      <option value="11">１１月</option>
40      <option value="12">１２月</option>
41    </select>
42    <select id="dialog-date" name="dialog-date">
43    </select>
44
45    <div id="dialog-hours">
46     <select id="start-hour" name="start-hour">
47      <option value="default">開始</option>
48      <option value="0">00</option>
49      <option value="1">01</option>
50      <option value="2">02</option>
51      <option value="3">03</option>
52      <option value="4">04</option>
53      <option value="5">05</option>
54      <option value="6">06</option>
55      <option value="7">07</option>
56      <option value="8">08</option>
57      <option value="9">09</option>
58      <option value="10">10</option>
59      <option value="11">11</option>
60      <option value="12">12</option>
61      <option value="13">13</option>
62      <option value="14">14</option>
63      <option value="15">15</option>
64      <option value="16">16</option>
65      <option value="17">17</option>
66      <option value="18">18</option>
67      <option value="19">19</option>
68      <option value="20">20</option>
69      <option value="21">21</option>
70      <option value="22">22</option>
71      <option value="23">23</option>
72     </select>
73      <p class="dialog-minute">:00 ～ </p>
74     <select id="end-hour" name="end-hour">
75      <option value="default">終了</option>
76      <option value="1">01</option>
77      <option value="2">02</option>
78      <option value="3">03</option>
79      <option value="4">04</option>
80      <option value="5">05</option>
81      <option value="6">06</option>
82      <option value="7">07</option>
83      <option value="8">08</option>
84      <option value="9">09</option>
85      <option value="10">10</option>
86      <option value="11">11</option>
87      <option value="12">12</option>
88      <option value="13">13</option>
89      <option value="14">14</option>
90      <option value="15">15</option>
91      <option value="16">16</option>
92      <option value="17">17</option>
93      <option value="18">18</option>
94      <option value="19">19</option>
95      <option value="20">20</option>
96      <option value="21">21</option>
97      <option value="22">22</option>
98      <option value="23">23</option>
99      <option value="24">24</option>
100     </select>
101      <p class="dialog-minute">:00</p>
102    </div>
103
104    <p style="padding:0;margin:0;">件名</p>
105    <input id="eventName" type=text size=30px>
106    <div style="float:right;margin-top:10px;">
107        <button id="changeEvent">変更</button>
108        <button id="deleteEvent">削除</button>
109    </div>
110  </div>
111</dialog>