teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問「県名」「市区町村名」「町域」の住所選択用セレクトボックスを作りたい

編集履歴

質問編集履歴

1

ソースを追記させていただきました。

2020/03/21 06:52

投稿

mikiko
mikiko

スコア11

test CHANGED
File without changes
test CHANGED
@@ -14,6 +14,234 @@
14
14
 
15
15
 
16
16
 
17
+ ソースを載せさせていただきます。
18
+
19
+ <form onsubmit="return selectbox_check();">
20
+
21
+ <p>
22
+
23
+ 県名　　：<select name="pref" id="pref" onChange="setMenuAddressItem(0,this[this.selectedIndex].attributes['title'].value)">
24
+
25
+ <option title="0" value="0" selected>----</option>
26
+
27
+ <option title="13tokyo" value="東京都">東京都</option>
28
+
29
+ <option title="14kanaga" value="神奈川県">神奈川県</option>
30
+
31
+ </select>
32
+
33
+ </p>
34
+
35
+ <p>
36
+
37
+ 市区町村：<select name="city" id="city" onChange="setMenuAddressItem(1,document.getElementById('pref')[document.getElementById('pref').selectedIndex].attributes['title'].value)">
38
+
39
+ <option value="0" selected>----</option>
40
+
41
+ </select>
42
+
43
+ </p>
44
+
45
+ <p>
46
+
47
+ 町域　　：<select name="town" id="town">
48
+
49
+ <option value="0" selected>----</option>
50
+
51
+ </select>
52
+
53
+ </p>
54
+
55
+ <input type="submit" value="検索">
56
+
57
+ </form>
58
+
59
+
60
+
61
+
62
+
63
+ <script type="text/javascript">
64
+
65
+ /** セレクトボックス切り替え関数 **/
66
+
67
+ function set_menu_address_item(i_type, s_filename){
68
+
69
+ if(s_filename != '0'){
70
+
71
+ var o_xmlreq = new XMLHttpRequest(); // HTTPでファイルを読み込むためのXMLHttpRrequestオブジェクトを生成
72
+
73
+ var s_filepass = 'https://●●●●●●●●●●●●●' + s_filename + '.csv'; // 読み込むファイルのパスを指定
74
+
75
+ o_xmlreq.open('get', s_filepass, true); // アクセスするファイルを指定
76
+
77
+ o_xmlreq.send(null); // HTTPリクエスト発行
78
+
79
+
80
+
81
+ // レスポンスが返ってきたら続きの処理を行う
82
+
83
+ o_xmlreq.onload = function(){
84
+
85
+ var a_pref = o_xmlreq.responseText.split("\r\n"); // 改行を区切り文字として行を要素とした配列を生成
86
+
87
+
88
+
89
+ if(i_type == 0){
90
+
91
+ // セレクトボックス初期化
92
+
93
+ while ( document.getElementById('city').options.length > 0 ) {
94
+
95
+ document.getElementById('city').removeChild(document.getElementById('city').firstChild);
96
+
97
+ }
98
+
99
+ while ( document.getElementById('town').options.length > 0 ) {
100
+
101
+ document.getElementById('town').removeChild(document.getElementById('town').firstChild);
102
+
103
+ }
104
+
105
+ document.getElementById('city').options[0] = new Option('----','0'); //OPTION1番目
106
+
107
+ document.getElementById('town').options[0] = new Option('----','0'); //OPTION1番目
108
+
109
+ var i_check_index = 0;
110
+
111
+ for( var i=1; i<a_pref.length; i++ ){
112
+
113
+ // 各行ごとにカンマで区切った文字列を要素とした配列を生成
114
+
115
+ var a_pref_disassembly = a_pref[i].split(',');
116
+
117
+ if( a_pref_disassembly.length <= 1 ){
118
+
119
+ continue;
120
+
121
+ }
122
+
123
+ var s_city_name = a_pref_disassembly[9].replace(/"/g, '');
124
+
125
+ if(document.getElementById('city').options[i_check_index].text != s_city_name){
126
+
127
+ document.getElementById('city').options[i_check_index + 1] = new Option(s_city_name,s_city_name);
128
+
129
+ i_check_index++;
130
+
131
+ }
132
+
133
+ }
134
+
135
+ } else {
136
+
137
+ // セレクトボックス初期化
138
+
139
+ while ( document.getElementById('town').options.length > 0 ) {
140
+
141
+ document.getElementById('town').removeChild(document.getElementById('town').firstChild);
142
+
143
+ }
144
+
145
+ // 選択中の要素を抜き出す
146
+
147
+ var s_selected_city_name = document.getElementById('city').value;
148
+
149
+ document.getElementById('town').options[0] = new Option('----','0'); //OPTION1番目
150
+
151
+ var i_check_index = 0;
152
+
153
+ for( var i=1; i<a_pref.length; i++ ){
154
+
155
+ // 各行ごとにカンマで区切った文字列を要素とした配列を生成
156
+
157
+ var a_pref_disassembly = a_pref[i].split(',');
158
+
159
+ if( a_pref_disassembly.length <= 1 ){
160
+
161
+ continue;
162
+
163
+ }
164
+
165
+ var s_city_name = a_pref_disassembly[9].replace(/"/g, '');
166
+
167
+ var s_town_name = a_pref_disassembly[11].replace(/"/g, '');
168
+
169
+ if((s_selected_city_name == s_city_name) && ('　' != s_town_name) && (document.getElementById('town').options[i_check_index].text != s_town_name)){
170
+
171
+ document.getElementById('town').options[i_check_index + 1] = new Option(s_town_name,s_town_name);
172
+
173
+ i_check_index++;
174
+
175
+ }
176
+
177
+ }
178
+
179
+ }
180
+
181
+ }
182
+
183
+ } else {
184
+
185
+ // セレクトボックス初期化
186
+
187
+ while ( document.getElementById('city').options.length > 0 ) {
188
+
189
+ document.getElementById('city').removeChild(document.getElementById('city').firstChild);
190
+
191
+ }
192
+
193
+ while ( document.getElementById('town').options.length > 0 ) {
194
+
195
+ document.getElementById('town').removeChild(document.getElementById('town').firstChild);
196
+
197
+ }
198
+
199
+ document.getElementById('city').options[0] = new Option('----','0'); //OPTION1番目
200
+
201
+ document.getElementById('town').options[0] = new Option('----','0'); //OPTION1番目
202
+
203
+ }
204
+
205
+ }
206
+
207
+
208
+
209
+ /** セレクトボックス入力チェック関数 **/
210
+
211
+ function selectbox_check(){
212
+
213
+ if(document.getElementById('pref').selectedIndex == 0){
214
+
215
+ window.alert('県名を選択してください。');
216
+
217
+ return false;
218
+
219
+ }
220
+
221
+ if(document.getElementById('city').selectedIndex == 0){
222
+
223
+ window.alert('市区町村名を選択してください。');
224
+
225
+ return false;
226
+
227
+ }
228
+
229
+ if(document.getElementById('town').selectedIndex == 0){
230
+
231
+ window.alert('町域名を選択してください。');
232
+
233
+ return false;
234
+
235
+ }
236
+
237
+ return true;
238
+
239
+ }
240
+
241
+ </script>
242
+
243
+
244
+
17
245
  phpやJavaScriptに明るくなく、つまずいてしまい投稿させていただきました。
18
246
 
19
247
  何卒どうぞよろしくお願いいたします。