回答編集履歴
2
修正
test
CHANGED
|
@@ -44,6 +44,8 @@
|
|
|
44
44
|
|
|
45
45
|
|
|
46
46
|
|
|
47
|
+
//対象全て一気に影響するパターン
|
|
48
|
+
|
|
47
49
|
selecthoge.on('change', function(){
|
|
48
50
|
|
|
49
51
|
if(selecthoge.prop("selectedIndex") == 0) {
|
|
@@ -53,6 +55,24 @@
|
|
|
53
55
|
} else {
|
|
54
56
|
|
|
55
57
|
selecthoge.css({'color': 'green'});
|
|
58
|
+
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
});
|
|
62
|
+
|
|
63
|
+
|
|
64
|
+
|
|
65
|
+
//選択したものだけ影響させるパターン
|
|
66
|
+
|
|
67
|
+
selecthoge.on('change', function(){
|
|
68
|
+
|
|
69
|
+
if($(this).prop("selectedIndex") == 0) {
|
|
70
|
+
|
|
71
|
+
$(this).css({'color': 'red'});
|
|
72
|
+
|
|
73
|
+
} else {
|
|
74
|
+
|
|
75
|
+
$(this).css({'color': 'green'});
|
|
56
76
|
|
|
57
77
|
}
|
|
58
78
|
|
|
@@ -115,3 +135,47 @@
|
|
|
115
135
|
|
|
116
136
|
|
|
117
137
|
※対象が今は1つでも後に増える可能性があるのであればclassの方が良いです。
|
|
138
|
+
|
|
139
|
+
|
|
140
|
+
|
|
141
|
+
|
|
142
|
+
|
|
143
|
+
追記。
|
|
144
|
+
|
|
145
|
+
hoge()で実行していますが、このままだと「変更都度実行」が出来ないのではないかと思います。
|
|
146
|
+
|
|
147
|
+
関数にするのではなく、「HTML読み込み終了時に実行」としてはどうでしょうか。
|
|
148
|
+
|
|
149
|
+
- [jQueryの基本 - $(document).ready](http://qiita.com/8845musign/items/88a8c693c84ba63cea1d)
|
|
150
|
+
|
|
151
|
+
|
|
152
|
+
|
|
153
|
+
例：
|
|
154
|
+
|
|
155
|
+
```javascript
|
|
156
|
+
|
|
157
|
+
$(function(){
|
|
158
|
+
|
|
159
|
+
|
|
160
|
+
|
|
161
|
+
if($('select').prop("selectedIndex") == 0) {
|
|
162
|
+
|
|
163
|
+
～～～処理
|
|
164
|
+
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
|
|
168
|
+
|
|
169
|
+
$('select').on('change', function(){
|
|
170
|
+
|
|
171
|
+
～～～処理
|
|
172
|
+
|
|
173
|
+
});
|
|
174
|
+
|
|
175
|
+
});
|
|
176
|
+
|
|
177
|
+
|
|
178
|
+
|
|
179
|
+
|
|
180
|
+
|
|
181
|
+
```
|
1
コメントを受けての調整\+
test
CHANGED
|
@@ -1,24 +1,26 @@
|
|
|
1
1
|
select のみですと、ページ内全てのselectに影響を及ぼします。
|
|
2
2
|
|
|
3
3
|
影響させたい対象を絞り込むための記載が必要です。
|
|
4
|
-
|
|
5
|
-
。
|
|
6
4
|
|
|
7
5
|
|
|
8
6
|
|
|
9
7
|
# 対象のselectのみclassを与える
|
|
10
8
|
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
※classは何個与えてもOKなので対象用のクラスを別で用意しましょう
|
|
12
|
+
|
|
11
13
|
```html
|
|
12
14
|
|
|
13
|
-
<select name="hoge1" class="hogehoge">
|
|
15
|
+
<select name="hoge1" class="aaa hogehoge">
|
|
14
16
|
|
|
15
17
|
</select>
|
|
16
18
|
|
|
17
|
-
<select name="hoge2">
|
|
19
|
+
<select name="hoge2" class="aaa">
|
|
18
20
|
|
|
19
21
|
</select>
|
|
20
22
|
|
|
21
|
-
<select name="hoge3" class="hogehoge">
|
|
23
|
+
<select name="hoge3" class="aaa hogehoge">
|
|
22
24
|
|
|
23
25
|
</select>
|
|
24
26
|
|
|
@@ -64,15 +66,15 @@
|
|
|
64
66
|
|
|
65
67
|
```html
|
|
66
68
|
|
|
67
|
-
<select name="hoge1" id="hogehoge">
|
|
69
|
+
<select name="hoge1" id="hogehoge" class="aaa">
|
|
68
70
|
|
|
69
71
|
</select>
|
|
70
72
|
|
|
71
|
-
<select name="hoge2">
|
|
73
|
+
<select name="hoge2" class="aaa">
|
|
72
74
|
|
|
73
75
|
</select>
|
|
74
76
|
|
|
75
|
-
<select name="hoge3">
|
|
77
|
+
<select name="hoge3" class="aaa">
|
|
76
78
|
|
|
77
79
|
</select>
|
|
78
80
|
|