teratail
回答率
85.47%
質問するログイン新規登録
トップHTML5に関する質問JavaScriptで複数選択リストの移動

編集履歴

質問編集履歴

7

説明追加

2022/01/26 15:55

投稿

hunata_konbi
hunata_konbi

スコア2

test CHANGED
File without changes
test CHANGED
@@ -2,7 +2,7 @@
2
2
  ただ上下移動するものは書くことができましたが複数移動にするとうまく動作しません。
3
3
  複数選択したものを上下に移動させる方法を教えてください。
4
4
 
5
- イメージ
5
+ 実装したいもの
6
6
  2と3を選択して下ボタンを押下
7
7
  <option value="1">1</option>
8
8
  <option value="2">2</option>
@@ -13,6 +13,21 @@
13
13
  <option value="4">4</option>
14
14
  <option value="2">2</option>
15
15
  <option value="3">3</option>
16
+
17
+ 3と5を選択して上ボタンを押した場合:
18
+ <option value="1">1</option>
19
+ <option value="2">2</option>
20
+ <option value="3">3</option>
21
+ <option value="4">4</option>
22
+ <option value="5">5</option>
23
+ <option value="6">6</option>
24
+ ↓
25
+ <option value="1">1</option>
26
+ <option value="3">3</option>
27
+ <option value="2">2</option>
28
+ <option value="5">5</option>
29
+ <option value="4">4</option>
30
+ <option value="6">6</option>
16
31
 
17
32
 
18
33
 
@@ -68,4 +83,3 @@
68
83
  }
69
84
 
70
85
  ```
71
-
HTML5リストボックスJavaScript

6

コード修正

2022/01/26 15:37

投稿

hunata_konbi
hunata_konbi

スコア2

test CHANGED
File without changes
test CHANGED
@@ -38,31 +38,33 @@
38
38
  ```
39
39
 
40
40
  ```JavaScript
41
+
41
- function move(act){
42
+ function move(act) {
42
- var s = document.getElementById("item-list"");
43
+ var s = document.getElementById("item-list");
44
+
43
45
  if(s.selectedIndex == -1) return;
44
-
46
+
45
47
  var opt = s.options[s.selectedIndex];
46
48
 
47
- // option要素を取得
48
- ver opts = s.options;
49
+ var opts = s.options;
50
+
51
+ for (let i = 0; i < opts.length; i++) {
52
+ if (opts[i].selected){
53
+ console.log(opts[i].value);
49
54
 
50
- for (let i = 0; i < opts.length; i++) {
51
- if (opts[i].selected){
52
- console.log(opts[i].value);
53
-
54
- if (act == up) {
55
+ if (act == 'up') {
55
- if (s.options[s.selectedIndex-1]) {
56
+ if (s.options[s.selectedIndex-1]) {
56
- s.insertBefore(opt, s.options[s.selectedIn-dex-1]);
57
+ s.insertBefore(opt, s.options[s.selectedIndex-1]);
57
- }
58
+ }
58
- }
59
+ }
60
+
59
- if (act == down) {
61
+ if (act == 'down') {
60
- if (s.options[s.selectedIndex+1]) {
62
+ if (s.options[s.selectedIndex+1]) {
61
- s.insertBefore(opt, s.options[s.selectedIndex+1].nextSibling);
63
+ s.insertBefore(opt, s.options[s.selectedIndex+1].nextSibling);
62
- }
64
+ }
63
- }
65
+ }
64
- }
66
+ }
65
- }
67
+ }
66
68
  }
67
69
 
68
70
  ```
HTML5リストボックスJavaScript

5

誤記

2022/01/26 14:16

投稿

hunata_konbi
hunata_konbi

スコア2

test CHANGED
File without changes
test CHANGED
@@ -53,7 +53,7 @@
53
53
 
54
54
  if (act == up) {
55
55
  if (s.options[s.selectedIndex-1]) {
56
- s.insertBefore(opt, s.options[s.selectedIndex-1]);
56
+ s.insertBefore(opt, s.options[s.selectedIn-dex-1]);
57
57
  }
58
58
  }
59
59
  if (act == down) {
HTML5リストボックスJavaScript

4

誤記

2022/01/26 13:53

投稿

hunata_konbi
hunata_konbi

スコア2

test CHANGED
File without changes
test CHANGED
@@ -45,19 +45,19 @@
45
45
  var opt = s.options[s.selectedIndex];
46
46
 
47
47
  // option要素を取得
48
- let opts = s.options;
48
+ ver opts = s.options;
49
49
 
50
50
  for (let i = 0; i < opts.length; i++) {
51
51
  if (opts[i].selected){
52
52
  console.log(opts[i].value);
53
53
 
54
54
  if (act == up) {
55
- if (s.options[bx.selectedIndex-1]) {
55
+ if (s.options[s.selectedIndex-1]) {
56
56
  s.insertBefore(opt, s.options[s.selectedIndex-1]);
57
57
  }
58
58
  }
59
59
  if (act == down) {
60
- if (s.options[bx.selectedIndex+1]) {
60
+ if (s.options[s.selectedIndex+1]) {
61
61
  s.insertBefore(opt, s.options[s.selectedIndex+1].nextSibling);
62
62
  }
63
63
  }
HTML5リストボックスJavaScript

3

誤記

2022/01/26 11:29

投稿

hunata_konbi
hunata_konbi

スコア2

test CHANGED
File without changes
test CHANGED
@@ -64,6 +64,6 @@
64
64
  }
65
65
  }
66
66
  }
67
- コード
67
+
68
68
  ```
69
69
 
HTML5リストボックスJavaScript

2

誤記

2022/01/26 11:29

投稿

hunata_konbi
hunata_konbi

スコア2

test CHANGED
File without changes
test CHANGED
@@ -20,7 +20,7 @@
20
20
  <table>
21
21
  <tr>
22
22
  <td>
23
- <select id="item-list" size="8">
23
+ <select id="item-list" size="8" multiple="multiple">
24
24
  <option value="1">1</option>
25
25
  <option value="2">2</option>
26
26
  <option value="3">3</option>
HTML5リストボックスJavaScript

1

イメージの追加

2022/01/26 11:27

投稿

hunata_konbi
hunata_konbi

スコア2

test CHANGED
File without changes
test CHANGED
@@ -1,7 +1,20 @@
1
1
  JavaScript でリストから複数選択したものを上下ボタンで移動するコードを書きたいです。
2
- リストボックスの横に上下ボタンがあり複数選択して上ボタン、または下ボタンを押すとまとめて移動するイメージです。
3
2
  ただ上下移動するものは書くことができましたが複数移動にするとうまく動作しません。
4
3
  複数選択したものを上下に移動させる方法を教えてください。
4
+
5
+ イメージ
6
+ 2と3を選択して下ボタンを押下
7
+ <option value="1">1</option>
8
+ <option value="2">2</option>
9
+ <option value="3">3</option>
10
+ <option value="4">4</option>
11
+ ↓
12
+ <option value="1">1</option>
13
+ <option value="4">4</option>
14
+ <option value="2">2</option>
15
+ <option value="3">3</option>
16
+
17
+
5
18
 
6
19
  ```HTML
7
20
  <table>
HTML5リストボックスJavaScript