teratail
回答率
85.47%
質問するログイン新規登録
トップJavaScriptに関する質問jQuery で <select multiple> をコピーしたい

編集履歴

回答編集履歴

15

テキスト修正

2018/09/04 00:26

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -116,4 +116,4 @@
116
116
 
117
117
 
118
118
 
119
- 回答にサンプルとして挙げた [jsFiddle のコード](https://jsfiddle.net/jun68ykt/dj3cvq91/46/)を、 FireFox v61 で開くと問題なく動作しましたが、Chrome v68 だと、スクロール後に `<option>`をクリックしたときにスクロール位置が勝手に移動してしまい、違和感のある動作になってしまうことがあります。ブラウザによって挙動の異なるという意味では、ちょっと微妙なやり方なのかもしれません。
119
+ 回答にサンプルとして挙げた [jsFiddle のコード](https://jsfiddle.net/jun68ykt/dj3cvq91/46/)を、 FireFox v61 で開くと問題なく動作しましたが、Chrome v68 だと、スクロール後に `<option>`をクリックしたときにスクロール位置が勝手に移動してしまい、違和感のある動作になってしまうことがあります。（ブラウザによって挙動が異なるという意味では、ちょっと微妙なやり方なのかもしれません。）

14

テキスト修正

2018/09/04 00:26

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -116,4 +116,4 @@
116
116
 
117
117
 
118
118
 
119
- 回答にサンプルとして挙げた jsFiddle のコードは、 FireFox v61 だと問題なく動作しましたが、Chrome v68 だと、スクロール後に `<option>`をクリックすると、スクロール位置が移動してしまい、違和感のある動作になってしまいます。ブラウザによって挙動の異なるコードという意味では、ちょっと微妙なやり方をしてしまっているかもしれません。
119
+ 回答にサンプルとして挙げた [jsFiddle のコード](https://jsfiddle.net/jun68ykt/dj3cvq91/46/)を、 FireFox v61 で開くと問題なく動作しましたが、Chrome v68 だと、スクロール後に `<option>`をクリックしたときにスクロール位置が勝手に移動してしまい、違和感のある動作になってしまうことがあります。ブラウザによって挙動の異なるという意味では、ちょっと微妙なやり方なのかもしれません。

13

テキスト修正

2018/09/04 00:22

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -116,4 +116,4 @@
116
116
 
117
117
 
118
118
 
119
- 回答にサンプルとして挙げた jsFiddle のコードは、 FireFox v61 だと問題なく動作しましたが、Chrome v68 だと、スクロール後に `<option>`をクリックすると、スクロール位置が移動してしまい、違和感のある動作になってしまいます。なのでちょっと微妙なやり方をしてしまっているかもしれません。
119
+ 回答にサンプルとして挙げた jsFiddle のコードは、 FireFox v61 だと問題なく動作しましたが、Chrome v68 だと、スクロール後に `<option>`をクリックすると、スクロール位置が移動してしまい、違和感のある動作になってしまいます。ブラウザによって挙動の異なるコードという意味では、ちょっと微妙なやり方をしてしまっているかもしれません。

12

テキスト修正

2018/09/03 23:41

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -107,3 +107,13 @@
107
107
 
108
108
 
109
109
  以上、参考になれば幸いです。
110
+
111
+
112
+
113
+ ---
114
+
115
+ 追記
116
+
117
+
118
+
119
+ 回答にサンプルとして挙げた jsFiddle のコードは、 FireFox v61 だと問題なく動作しましたが、Chrome v68 だと、スクロール後に `<option>`をクリックすると、スクロール位置が移動してしまい、違和感のある動作になってしまいます。なのでちょっと微妙なやり方をしてしまっているかもしれません。

11

テキスト修正

2018/09/03 23:39

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -66,7 +66,9 @@
66
66
 
67
67
 
68
68
 
69
+ 　　
69
70
 
71
+ 　　
70
72
 
71
73
  参考までに、以下に要件を満たすサンプルを作ってみました。
72
74
 
@@ -76,7 +78,7 @@
76
78
 
77
79
 
78
80
 
79
- 上記のコードは、ご質問に挙げられているコードとはちょっとやり方が違っていますが、要点は以下です。
81
+ 上記の jsFiddleに上げたコードは、ご質問に挙げられているコードとはちょっとやり方が違っていますが、要点は以下です。
80
82
 
81
83
 
82
84
 
@@ -84,7 +86,7 @@
84
86
 
85
87
  　　
86
88
 
87
- - 左右いずれの `<select>` でも `change` が発生したら、他方の`<select>` の選択状態の`<option>`を同じにします。方法としては、以下
89
+ - 左右いずれの `<select>` でも `change` が発生したら、他方の`<select>` の選択状態の`<option>`を同じにします。方法としては、以下のようにしています。
88
90
 
89
91
 
90
92
 
@@ -96,7 +98,7 @@
96
98
 
97
99
 
98
100
 
99
- のように、コピー元`<select>`である `$(this)` の `.val()` で取得できる配列を、コピー先`<select>`に`.val(values)` で与えて、選択状態になる値を更新しています。
101
+ 上記にて、コピー元`<select>`である `$(this)` の `.val()` で取得できる配列を、コピー先`<select>`に`.val(values)` で与えて、選択状態になる値を更新しています。
100
102
 
101
103
  　　
102
104
 

10

テキスト修正

2018/09/03 23:02

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -76,13 +76,27 @@
76
76
 
77
77
 
78
78
 
79
- 上記のコードは、ご質問に挙げられているコードとはちょっとやり方が違っていますが、
79
+ 上記のコードは、ご質問に挙げられているコードとはちょっとやり方が違っていますが、要点は以下です。
80
+
81
+
80
82
 
81
83
  - 左右の `<select>` それぞれに 30個の `<option>` を作ります。(スクロールさせるため)
82
84
 
83
85
  　　
84
86
 
87
+ - 左右いずれの `<select>` でも `change` が発生したら、他方の`<select>` の選択状態の`<option>`を同じにします。方法としては、以下
88
+
89
+
90
+
91
+ ```javascript
92
+
93
+ $(`#${otherSelectId}`).val($(this).val());
94
+
95
+ ```
96
+
97
+
98
+
85
- - 左右いずれの `<select>` でも `change` が発生したら、他方の`<select>` の選択状態の`<option>`を同じにします。方法としては、コピー元`<select>`の `.val()` で取得できる配列を、コピー先`<select>`に`.val(values)` で与えて、選択状態になる値を更新しています。
99
+ のように、コピー元`<select>`である `$(this)` の `.val()` で取得できる配列を、コピー先`<select>`に`.val(values)` で与えて、選択状態になる値を更新しています。
86
100
 
87
101
  　　
88
102
 

9

テキスト修正

2018/09/03 23:00

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
File without changes

8

テキスト修正

2018/09/03 22:44

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -82,7 +82,7 @@
82
82
 
83
83
  　　
84
84
 
85
- - 左右いずれの `<select>` でも `change` が発生したら、他方の`<select>` で選択状態の値を同じにします。方法としては、コピー元`<select>`の `.val()` で取得できる配列を、コピー先`<select>`に`.val(values)` で与えて、選択状態になる値を更新しています。
85
+ - 左右いずれの `<select>` でも `change` が発生したら、他方の`<select>` の選択状態の`<option>`を同じにします。方法としては、コピー元`<select>`の `.val()` で取得できる配列を、コピー先`<select>`に`.val(values)` で与えて、選択状態になる値を更新しています。
86
86
 
87
87
  　　
88
88
 

7

テキスト修正

2018/09/03 22:44

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -80,7 +80,11 @@
80
80
 
81
81
  - 左右の `<select>` それぞれに 30個の `<option>` を作ります。(スクロールさせるため)
82
82
 
83
+ 　　
84
+
83
- - 左右いずれの `<select>` でも `change` が発生したら、他方の`<select>` で選択状態の値を同じにします。
85
+ - 左右いずれの `<select>` でも `change` が発生したら、他方の`<select>` で選択状態の値を同じにします。方法としては、コピー元`<select>`の `.val()` で取得できる配列を、コピー先`<select>`に`.val(values)` で与えて、選択状態になる値を更新しています。
86
+
87
+ 　　
84
88
 
85
89
  - 左右いずれの `<select>` でも `scroll` が発生したら、他方の`<select>`も同じ位置にスクロールさせます。
86
90
 

6

テキスト修正

2018/09/03 22:42

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
File without changes

5

テキスト修正

2018/09/03 22:37

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -72,7 +72,7 @@
72
72
 
73
73
 
74
74
 
75
- [https://jsfiddle.net/jun68ykt/dj3cvq91/42/](https://jsfiddle.net/jun68ykt/dj3cvq91/42/)
75
+ [https://jsfiddle.net/jun68ykt/dj3cvq91/46/](https://jsfiddle.net/jun68ykt/dj3cvq91/46/)
76
76
 
77
77
 
78
78
 

4

テキスト修正

2018/09/03 22:36

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -80,7 +80,7 @@
80
80
 
81
81
  - 左右の `<select>` それぞれに 30個の `<option>` を作ります。(スクロールさせるため)
82
82
 
83
- - 左右いずれの `<select>` でも `change` が発生したら、他方の`<option>` の選択状態を同じにします。
83
+ - 左右いずれの `<select>` でも `change` が発生したら、他方の`<select>` で選択状態の値を同じにします。
84
84
 
85
85
  - 左右いずれの `<select>` でも `scroll` が発生したら、他方の`<select>`も同じ位置にスクロールさせます。
86
86
 

3

テキスト修正

2018/09/03 22:32

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -46,7 +46,15 @@
46
46
 
47
47
  ```
48
48
 
49
- の、 `each((o) =>` としているところは、`each((index,o) => ` かなと思います。
49
+ の、 `each((o) =>` としているところは、`each((index,o) => ` かなと思います。上記だと `o` にインデクスの整数が入ってきますが 整数の`o` は `o.val()` というメソッドは持っていないために
50
+
51
+
52
+
53
+ > Uncaught TypeError: o.val is not a function
54
+
55
+
56
+
57
+ というエラーが発生することになります。
50
58
 
51
59
 
52
60
 

2

テキスト修正

2018/09/03 22:28

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -6,7 +6,9 @@
6
6
 
7
7
 
8
8
 
9
+
10
+
9
- each() の仕様は、以下
11
+ `each()` の仕様は、以下
10
12
 
11
13
 
12
14
 
@@ -14,7 +16,23 @@
14
16
 
15
17
 
16
18
 
19
+ に
20
+
21
+
22
+
23
+ > .each( function )
24
+
25
+ >
26
+
27
+ > function
28
+
29
+ > Type: Function( Integer index, Element element )
30
+
31
+ A function to execute for each matched element.
32
+
33
+
34
+
17
- に記載されているとおり、 `each()` に与える関数の第１引数にはインデクスが入ってきます。ですので、以下の部分
35
+ と記載されているとおり、 `each()` に与える関数の第１引数にはインデクスが入ってきます。ですので、以下の部分
18
36
 
19
37
  ```javascript
20
38
 
@@ -28,7 +46,7 @@
28
46
 
29
47
  ```
30
48
 
31
- の、 `each((o) =>` としているところは、`each((i,o) => ` かなと思います。
49
+ の、 `each((o) =>` としているところは、`each((index,o) => ` かなと思います。
32
50
 
33
51
 
34
52
 
@@ -42,7 +60,7 @@
42
60
 
43
61
 
44
62
 
45
- ご質問に挙げられているコードとはちょっとやり方が違っていますが、以下に要件を満たすサンプルを作ってみました。
63
+ 参考までに、以下に要件を満たすサンプルを作ってみました。
46
64
 
47
65
 
48
66
 
@@ -50,7 +68,7 @@
50
68
 
51
69
 
52
70
 
53
- 上記では、
71
+ 上記のコードは、ご質問に挙げられているコードとはちょっとやり方が違っていますが、
54
72
 
55
73
  - 左右の `<select>` それぞれに 30個の `<option>` を作ります。(スクロールさせるため)
56
74
 

1

テキスト修正

2018/09/03 22:25

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -14,7 +14,7 @@
14
14
 
15
15
 
16
16
 
17
- のとおり第１引数はにインデクスが入ってきます。ですので、以下の部分
17
+ に記載されているとおり、 `each()` に与える関数の第１引数にはインデクスが入ってきます。ですので、以下の部分
18
18
 
19
19
  ```javascript
20
20