回答編集履歴
2
修正
answer
CHANGED
|
@@ -21,6 +21,7 @@
|
|
|
21
21
|
selecthoge.css({'color': 'red'});
|
|
22
22
|
}
|
|
23
23
|
|
|
24
|
+
//対象全て一気に影響するパターン
|
|
24
25
|
selecthoge.on('change', function(){
|
|
25
26
|
if(selecthoge.prop("selectedIndex") == 0) {
|
|
26
27
|
selecthoge.css({'color': 'red'});
|
|
@@ -28,6 +29,15 @@
|
|
|
28
29
|
selecthoge.css({'color': 'green'});
|
|
29
30
|
}
|
|
30
31
|
});
|
|
32
|
+
|
|
33
|
+
//選択したものだけ影響させるパターン
|
|
34
|
+
selecthoge.on('change', function(){
|
|
35
|
+
if($(this).prop("selectedIndex") == 0) {
|
|
36
|
+
$(this).css({'color': 'red'});
|
|
37
|
+
} else {
|
|
38
|
+
$(this).css({'color': 'green'});
|
|
39
|
+
}
|
|
40
|
+
});
|
|
31
41
|
```
|
|
32
42
|
|
|
33
43
|
# 対象のselectが1つしかない場合はIDを与える
|
|
@@ -56,4 +66,26 @@
|
|
|
56
66
|
});
|
|
57
67
|
```
|
|
58
68
|
|
|
59
|
-
※対象が今は1つでも後に増える可能性があるのであればclassの方が良いです。
|
|
69
|
+
※対象が今は1つでも後に増える可能性があるのであればclassの方が良いです。
|
|
70
|
+
|
|
71
|
+
|
|
72
|
+
追記。
|
|
73
|
+
hoge()で実行していますが、このままだと「変更都度実行」が出来ないのではないかと思います。
|
|
74
|
+
関数にするのではなく、「HTML読み込み終了時に実行」としてはどうでしょうか。
|
|
75
|
+
- [jQueryの基本 - $(document).ready](http://qiita.com/8845musign/items/88a8c693c84ba63cea1d)
|
|
76
|
+
|
|
77
|
+
例：
|
|
78
|
+
```javascript
|
|
79
|
+
$(function(){
|
|
80
|
+
|
|
81
|
+
if($('select').prop("selectedIndex") == 0) {
|
|
82
|
+
～～～処理
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
$('select').on('change', function(){
|
|
86
|
+
～～～処理
|
|
87
|
+
});
|
|
88
|
+
});
|
|
89
|
+
|
|
90
|
+
|
|
91
|
+
```
|
1
コメントを受けての調整\+
answer
CHANGED
|
@@ -1,14 +1,15 @@
|
|
|
1
1
|
select のみですと、ページ内全てのselectに影響を及ぼします。
|
|
2
2
|
影響させたい対象を絞り込むための記載が必要です。
|
|
3
|
-
。
|
|
4
3
|
|
|
5
4
|
# 対象のselectのみclassを与える
|
|
5
|
+
|
|
6
|
+
※classは何個与えてもOKなので対象用のクラスを別で用意しましょう
|
|
6
7
|
```html
|
|
7
|
-
<select name="hoge1" class="hogehoge">
|
|
8
|
+
<select name="hoge1" class="aaa hogehoge">
|
|
8
9
|
</select>
|
|
9
|
-
<select name="hoge2">
|
|
10
|
+
<select name="hoge2" class="aaa">
|
|
10
11
|
</select>
|
|
11
|
-
<select name="hoge3" class="hogehoge">
|
|
12
|
+
<select name="hoge3" class="aaa hogehoge">
|
|
12
13
|
</select>
|
|
13
14
|
```
|
|
14
15
|
|
|
@@ -31,11 +32,11 @@
|
|
|
31
32
|
|
|
32
33
|
# 対象のselectが1つしかない場合はIDを与える
|
|
33
34
|
```html
|
|
34
|
-
<select name="hoge1" id="hogehoge">
|
|
35
|
+
<select name="hoge1" id="hogehoge" class="aaa">
|
|
35
36
|
</select>
|
|
36
|
-
<select name="hoge2">
|
|
37
|
+
<select name="hoge2" class="aaa">
|
|
37
38
|
</select>
|
|
38
|
-
<select name="hoge3">
|
|
39
|
+
<select name="hoge3" class="aaa">
|
|
39
40
|
</select>
|
|
40
41
|
```
|
|
41
42
|
|