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

編集履歴

回答編集履歴

15

テキスト修正

2018/09/04 00:26

投稿

jun68ykt
jun68ykt

スコア9058

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

14

テキスト修正

2018/09/04 00:26

投稿

jun68ykt
jun68ykt

スコア9058

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

13

テキスト修正

2018/09/04 00:22

投稿

jun68ykt
jun68ykt

スコア9058

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

12

テキスト修正

2018/09/03 23:41

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -52,4 +52,9 @@
52
52
  　　
53
53
  - 左右いずれの `<select>` でも `scroll` が発生したら、他方の`<select>`も同じ位置にスクロールさせます。
54
54
 
55
- 以上、参考になれば幸いです。
55
+ 以上、参考になれば幸いです。
56
+
57
+ ---
58
+ 追記
59
+
60
+ 回答にサンプルとして挙げた jsFiddle のコードは、 FireFox v61 だと問題なく動作しましたが、Chrome v68 だと、スクロール後に `<option>`をクリックすると、スクロール位置が移動してしまい、違和感のある動作になってしまいます。なのでちょっと微妙なやり方をしてしまっているかもしれません。

11

テキスト修正

2018/09/03 23:39

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -32,22 +32,23 @@
32
32
 
33
33
  [scrollTop](https://api.jquery.com/scrollTop/)　を使えばできます。
34
34
 
35
-
35
+ 　　
36
+ 　　
36
37
  参考までに、以下に要件を満たすサンプルを作ってみました。
37
38
 
38
39
  [https://jsfiddle.net/jun68ykt/dj3cvq91/46/](https://jsfiddle.net/jun68ykt/dj3cvq91/46/)
39
40
 
40
- 上記のコードは、ご質問に挙げられているコードとはちょっとやり方が違っていますが、要点は以下です。
41
+ 上記の jsFiddleに上げたコードは、ご質問に挙げられているコードとはちょっとやり方が違っていますが、要点は以下です。
41
42
 
42
43
  - 左右の `<select>` それぞれに 30個の `<option>` を作ります。(スクロールさせるため)
43
44
  　　
44
- - 左右いずれの `<select>` でも `change` が発生したら、他方の`<select>` の選択状態の`<option>`を同じにします。方法としては、以下
45
+ - 左右いずれの `<select>` でも `change` が発生したら、他方の`<select>` の選択状態の`<option>`を同じにします。方法としては、以下のようにしています。
45
46
 
46
47
  ```javascript
47
48
  $(`#${otherSelectId}`).val($(this).val());
48
49
  ```
49
50
 
50
- のように、コピー元`<select>`である `$(this)` の `.val()` で取得できる配列を、コピー先`<select>`に`.val(values)` で与えて、選択状態になる値を更新しています。
51
+ 上記にて、コピー元`<select>`である `$(this)` の `.val()` で取得できる配列を、コピー先`<select>`に`.val(values)` で与えて、選択状態になる値を更新しています。
51
52
  　　
52
53
  - 左右いずれの `<select>` でも `scroll` が発生したら、他方の`<select>`も同じ位置にスクロールさせます。
53
54
 

10

テキスト修正

2018/09/03 23:02

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -37,10 +37,17 @@
37
37
 
38
38
  [https://jsfiddle.net/jun68ykt/dj3cvq91/46/](https://jsfiddle.net/jun68ykt/dj3cvq91/46/)
39
39
 
40
- 上記のコードは、ご質問に挙げられているコードとはちょっとやり方が違っていますが、
40
+ 上記のコードは、ご質問に挙げられているコードとはちょっとやり方が違っていますが、要点は以下です。
41
+
41
42
  - 左右の `<select>` それぞれに 30個の `<option>` を作ります。(スクロールさせるため)
42
43
  　　
44
+ - 左右いずれの `<select>` でも `change` が発生したら、他方の`<select>` の選択状態の`<option>`を同じにします。方法としては、以下
45
+
46
+ ```javascript
47
+ $(`#${otherSelectId}`).val($(this).val());
48
+ ```
49
+
43
- - 左右いずれの `<select>` でも `change` が発生したら、他方の`<select>` の選択状態の`<option>`を同じにします。方法としては、コピー元`<select>`の `.val()` で取得できる配列を、コピー先`<select>`に`.val(values)` で与えて、選択状態になる値を更新しています。
50
+ のように、コピー元`<select>`である `$(this)` の `.val()` で取得できる配列を、コピー先`<select>`に`.val(values)` で与えて、選択状態になる値を更新しています。
44
51
  　　
45
52
  - 左右いずれの `<select>` でも `scroll` が発生したら、他方の`<select>`も同じ位置にスクロールさせます。
46
53
 

9

テキスト修正

2018/09/03 23:00

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
File without changes

8

テキスト修正

2018/09/03 22:44

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -40,7 +40,7 @@
40
40
  上記のコードは、ご質問に挙げられているコードとはちょっとやり方が違っていますが、
41
41
  - 左右の `<select>` それぞれに 30個の `<option>` を作ります。(スクロールさせるため)
42
42
  　　
43
- - 左右いずれの `<select>` でも `change` が発生したら、他方の`<select>` で選択状態の値を同じにします。方法としては、コピー元`<select>`の `.val()` で取得できる配列を、コピー先`<select>`に`.val(values)` で与えて、選択状態になる値を更新しています。
43
+ - 左右いずれの `<select>` でも `change` が発生したら、他方の`<select>` の選択状態の`<option>`を同じにします。方法としては、コピー元`<select>`の `.val()` で取得できる配列を、コピー先`<select>`に`.val(values)` で与えて、選択状態になる値を更新しています。
44
44
  　　
45
45
  - 左右いずれの `<select>` でも `scroll` が発生したら、他方の`<select>`も同じ位置にスクロールさせます。
46
46
 

7

テキスト修正

2018/09/03 22:44

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -39,7 +39,9 @@
39
39
 
40
40
  上記のコードは、ご質問に挙げられているコードとはちょっとやり方が違っていますが、
41
41
  - 左右の `<select>` それぞれに 30個の `<option>` を作ります。(スクロールさせるため)
42
+ 　　
42
- - 左右いずれの `<select>` でも `change` が発生したら、他方の`<select>` で選択状態の値を同じにします。
43
+ - 左右いずれの `<select>` でも `change` が発生したら、他方の`<select>` で選択状態の値を同じにします。方法としては、コピー元`<select>`の `.val()` で取得できる配列を、コピー先`<select>`に`.val(values)` で与えて、選択状態になる値を更新しています。
44
+ 　　
43
45
  - 左右いずれの `<select>` でも `scroll` が発生したら、他方の`<select>`も同じ位置にスクロールさせます。
44
46
 
45
47
  以上、参考になれば幸いです。

6

テキスト修正

2018/09/03 22:42

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
File without changes

5

テキスト修正

2018/09/03 22:37

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -35,7 +35,7 @@
35
35
 
36
36
  参考までに、以下に要件を満たすサンプルを作ってみました。
37
37
 
38
- [https://jsfiddle.net/jun68ykt/dj3cvq91/42/](https://jsfiddle.net/jun68ykt/dj3cvq91/42/)
38
+ [https://jsfiddle.net/jun68ykt/dj3cvq91/46/](https://jsfiddle.net/jun68ykt/dj3cvq91/46/)
39
39
 
40
40
  上記のコードは、ご質問に挙げられているコードとはちょっとやり方が違っていますが、
41
41
  - 左右の `<select>` それぞれに 30個の `<option>` を作ります。(スクロールさせるため)

4

テキスト修正

2018/09/03 22:36

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -39,7 +39,7 @@
39
39
 
40
40
  上記のコードは、ご質問に挙げられているコードとはちょっとやり方が違っていますが、
41
41
  - 左右の `<select>` それぞれに 30個の `<option>` を作ります。(スクロールさせるため)
42
- - 左右いずれの `<select>` でも `change` が発生したら、他方の`<option>` の選択状態を同じにします。
42
+ - 左右いずれの `<select>` でも `change` が発生したら、他方の`<select>` で選択状態の値を同じにします。
43
43
  - 左右いずれの `<select>` でも `scroll` が発生したら、他方の`<select>`も同じ位置にスクロールさせます。
44
44
 
45
45
  以上、参考になれば幸いです。

3

テキスト修正

2018/09/03 22:32

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -22,8 +22,12 @@
22
22
  $("#right [value="+ o.val() +"]").attr("selected", o.attr("selected"));
23
23
  });
24
24
  ```
25
- の、 `each((o) =>` としているところは、`each((index,o) => ` かなと思います。
25
+ の、 `each((o) =>` としているところは、`each((index,o) => ` かなと思います。上記だと `o` にインデクスの整数が入ってきますが 整数の`o` は `o.val()` というメソッドは持っていないために
26
26
 
27
+ > Uncaught TypeError: o.val is not a function
28
+
29
+ というエラーが発生することになります。
30
+
27
31
  > あと片方をスクロールしたときもう一方のスクロール位置を一致させるのは簡単にできるでしょうか
28
32
 
29
33
  [scrollTop](https://api.jquery.com/scrollTop/)　を使えばできます。

2

テキスト修正

2018/09/03 22:28

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -2,29 +2,38 @@
2
2
 
3
3
  > 意図としては value が同じ位置の option のattr の selected 値を代入しようとしてるのですがこの書き方のどこが悪いのでしょうか
4
4
 
5
- each() の仕様は、以下
6
5
 
6
+ `each()` の仕様は、以下
7
+
7
8
  [https://api.jquery.com/each/](https://api.jquery.com/each/)
8
9
 
10
+ に
11
+
12
+ > .each( function )
13
+ >
14
+ > function
15
+ > Type: Function( Integer index, Element element )
16
+ A function to execute for each matched element.
17
+
9
- に記載されているとおり、 `each()` に与える関数の第１引数にはインデクスが入ってきます。ですので、以下の部分
18
+ と記載されているとおり、 `each()` に与える関数の第１引数にはインデクスが入ってきます。ですので、以下の部分
10
19
  ```javascript
11
20
  src.each((o) => {
12
21
  console.log(o);
13
22
  $("#right [value="+ o.val() +"]").attr("selected", o.attr("selected"));
14
23
  });
15
24
  ```
16
- の、 `each((o) =>` としているところは、`each((i,o) => ` かなと思います。
25
+ の、 `each((o) =>` としているところは、`each((index,o) => ` かなと思います。
17
26
 
18
27
  > あと片方をスクロールしたときもう一方のスクロール位置を一致させるのは簡単にできるでしょうか
19
28
 
20
29
  [scrollTop](https://api.jquery.com/scrollTop/)　を使えばできます。
21
30
 
22
31
 
23
- ご質問に挙げられているコードとはちょっとやり方が違っていますが、以下に要件を満たすサンプルを作ってみました。
32
+ 参考までに、以下に要件を満たすサンプルを作ってみました。
24
33
 
25
34
  [https://jsfiddle.net/jun68ykt/dj3cvq91/42/](https://jsfiddle.net/jun68ykt/dj3cvq91/42/)
26
35
 
27
- 上記では、
36
+ 上記のコードは、ご質問に挙げられているコードとはちょっとやり方が違っていますが、
28
37
  - 左右の `<select>` それぞれに 30個の `<option>` を作ります。(スクロールさせるため)
29
38
  - 左右いずれの `<select>` でも `change` が発生したら、他方の`<option>` の選択状態を同じにします。
30
39
  - 左右いずれの `<select>` でも `scroll` が発生したら、他方の`<select>`も同じ位置にスクロールさせます。

1

テキスト修正

2018/09/03 22:25

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -6,7 +6,7 @@
6
6
 
7
7
  [https://api.jquery.com/each/](https://api.jquery.com/each/)
8
8
 
9
- のとおり第１引数はにインデクスが入ってきます。ですので、以下の部分
9
+ に記載されているとおり、 `each()` に与える関数の第１引数にはインデクスが入ってきます。ですので、以下の部分
10
10
  ```javascript
11
11
  src.each((o) => {
12
12
  console.log(o);