質問編集履歴
1
質問の修正
test
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
路線名と駅名のプルダウンを連動させたい
|
test
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
CMSを作っており、路線と駅名のプルダウンを連動させたいと考えています。
|
|
1
|
+
CMSを作っており、路線名と駅名のプルダウンを連動させたいと考えています。
|
|
2
2
|
|
|
3
3
|
路線を選んだら、その路線の駅名を表示させるようにしたいです。
|
|
4
4
|
|
|
@@ -6,11 +6,7 @@
|
|
|
6
6
|
|
|
7
7
|
|
|
8
8
|
|
|
9
|
-
現在、全ての駅名が表示されています。
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
ソースを書かせていただきます。
|
|
9
|
+
現在のソースを書かせていただきます。
|
|
14
10
|
|
|
15
11
|
|
|
16
12
|
|
|
@@ -42,29 +38,73 @@
|
|
|
42
38
|
|
|
43
39
|
|
|
44
40
|
|
|
45
|
-
<select name="station1">
|
|
46
41
|
|
|
47
|
-
<option value="">-----駅を選択-----</option>
|
|
48
42
|
|
|
49
|
-
<?
|
|
50
43
|
|
|
51
|
-
$recordSet_St=mysqli_query($conn,"SELECT * FROM station");
|
|
52
44
|
|
|
53
|
-
|
|
45
|
+
<select id="station1"><option value="">-----駅を選択-----</option></select>
|
|
54
46
|
|
|
55
|
-
|
|
47
|
+
<script>
|
|
56
48
|
|
|
57
|
-
|
|
49
|
+
var array = new Array();
|
|
58
50
|
|
|
59
|
-
|
|
51
|
+
array[''] = new Array({cd:"0", label:"-----駅を選択-----"});
|
|
60
52
|
|
|
61
|
-
|
|
53
|
+
array["11603"] = new Array(
|
|
62
54
|
|
|
63
|
-
|
|
55
|
+
{cd:"1160301", label:"大阪"},
|
|
64
56
|
|
|
65
|
-
|
|
57
|
+
{cd:"1160308", label:"甲南山手"},
|
|
66
58
|
|
|
59
|
+
{cd:"1160309", label:"摂津本山"},
|
|
60
|
+
|
|
61
|
+
{cd:"1160310", label:"住吉"},
|
|
62
|
+
|
|
63
|
+
{cd:"1160311", label:"六甲道"}
|
|
64
|
+
|
|
65
|
+
);
|
|
66
|
+
|
|
67
|
+
array["34001"] = [
|
|
68
|
+
|
|
69
|
+
{cd:"3400101", label:"大阪梅田"},
|
|
70
|
+
|
|
71
|
+
{cd:"3400102", label:"中津"},
|
|
72
|
+
|
|
73
|
+
{cd:"3400111", label:"岡本"},
|
|
74
|
+
|
|
75
|
+
{cd:"3400112", label:"御影"},
|
|
76
|
+
|
|
77
|
+
{cd:"3400113", label:"六甲"}
|
|
78
|
+
|
|
79
|
+
];
|
|
80
|
+
|
|
81
|
+
document.getElementById('line1').onchange = function(){
|
|
82
|
+
|
|
83
|
+
station1 = document.getElementById("station1");
|
|
84
|
+
|
|
85
|
+
station1.options.length = 0
|
|
86
|
+
|
|
87
|
+
var changedPref = line1.value;
|
|
88
|
+
|
|
89
|
+
for (let i = 0; i < array[changedPref].length; i++) {
|
|
90
|
+
|
|
91
|
+
var op = document.createElement("option");
|
|
92
|
+
|
|
93
|
+
value = array[changedPref][i]
|
|
94
|
+
|
|
95
|
+
op.value = value.cd;
|
|
96
|
+
|
|
97
|
+
op.text = value.label;
|
|
98
|
+
|
|
99
|
+
station1.appendChild(op);
|
|
100
|
+
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
}
|
|
104
|
+
|
|
67
|
-
</s
|
|
105
|
+
</script>
|
|
106
|
+
|
|
107
|
+
|
|
68
108
|
|
|
69
109
|
|
|
70
110
|
|
|
@@ -74,8 +114,30 @@
|
|
|
74
114
|
|
|
75
115
|
|
|
76
116
|
|
|
77
|
-
|
|
117
|
+
上記のソースは、一旦試しで書いてみたのですが、
|
|
78
118
|
|
|
79
|
-
|
|
119
|
+
ジャバスクリプトの中で、データベースから引っ張ってきたデータを繰り返す
|
|
80
120
|
|
|
121
|
+
書き方をご教示いただけないでしょうか。
|
|
122
|
+
|
|
123
|
+
|
|
124
|
+
|
|
125
|
+
array["路線コード1"] = [
|
|
126
|
+
|
|
127
|
+
{cd:"駅コード1", label:"駅名1"},
|
|
128
|
+
|
|
129
|
+
{cd:"駅コード2", label:"駅名2"},
|
|
130
|
+
|
|
131
|
+
];
|
|
132
|
+
|
|
133
|
+
array["路線コード2"] = [
|
|
134
|
+
|
|
135
|
+
{cd:"駅コード1", label:"駅名1"},
|
|
136
|
+
|
|
137
|
+
{cd:"駅コード2", label:"駅名2"},
|
|
138
|
+
|
|
139
|
+
];
|
|
140
|
+
|
|
81
|
-
|
|
141
|
+
というふうに繰り返したいです。
|
|
142
|
+
|
|
143
|
+
（上記のソースでは、駅のデータベースからデータを取得する記述はまだ書いていません）
|