teratail
回答率
85.47%
質問するログイン新規登録
トップSQLに関する質問動的にプルダウンリストなどを生成したい　js?

編集履歴

回答編集履歴

8

a

2016/06/09 03:20

投稿

mpyw
mpyw

スコア5223

test CHANGED
@@ -58,7 +58,7 @@
58
58
 
59
59
  </div>
60
60
 
61
- <a v-on:click.prevent="++numbers.language" href="">追加する</a>
61
+ <a @click.prevent="++numbers.language" href="">追加する</a>
62
62
 
63
63
  </div>
64
64
 

7

a

2016/06/09 03:20

投稿

mpyw
mpyw

スコア5223

test CHANGED
@@ -5,6 +5,8 @@
5
5
  ```html
6
6
 
7
7
  <!DOCTYPE html>
8
+
9
+ <meta charset="UTF-8">
8
10
 
9
11
  <title>Sample</title>
10
12
 

6

a

2016/06/09 03:15

投稿

mpyw
mpyw

スコア5223

test CHANGED
@@ -20,7 +20,7 @@
20
20
 
21
21
  <h1>Sample</h1>
22
22
 
23
- <div id="app" v-cloak>
23
+ <form id="form" v-cloak action="submit.php" method="post">
24
24
 
25
25
  <div>
26
26
 
@@ -28,29 +28,29 @@
28
28
 
29
29
  <div v-for="i in numbers.language">
30
30
 
31
- <select>
31
+ <select name="languages[{{i}}][name]">
32
32
 
33
33
  <option selected>選択してください▼</option>
34
34
 
35
- <option>日本語</option>
35
+ <option value="jp">日本語</option>
36
36
 
37
- <option>英語</option>
37
+ <option value="en">英語</option>
38
38
 
39
- <option>フランス語</option>
39
+ <option value="fr">フランス語</option>
40
40
 
41
- <option>ドイツ語</option>
41
+ <option value="de">ドイツ語</option>
42
42
 
43
43
  </select>
44
44
 
45
- <select>
45
+ <select name="languages[{{i}}][level]">
46
46
 
47
47
  <option selected>選択してください▼</option>
48
48
 
49
- <option>母語並みに話せる</option>
49
+ <option value="3">母語並みに話せる</option>
50
50
 
51
- <option>ビジネスで困らない程度に話せる</option>
51
+ <option value="2">ビジネスで困らない程度に話せる</option>
52
52
 
53
- <option>日常会話で困らない程度に話せる</option>
53
+ <option value="1">日常会話で困らない程度に話せる</option>
54
54
 
55
55
  </select>
56
56
 
@@ -60,7 +60,7 @@
60
60
 
61
61
  </div>
62
62
 
63
- </div>
63
+ </form>
64
64
 
65
65
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.20/vue.min.js"></script>
66
66
 
@@ -70,7 +70,7 @@
70
70
 
71
71
  new Vue({
72
72
 
73
- el: '#app',
73
+ el: '#form',
74
74
 
75
75
  data: {
76
76
 

5

a

2016/06/09 03:14

投稿

mpyw
mpyw

スコア5223

test CHANGED
@@ -64,8 +64,6 @@
64
64
 
65
65
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.20/vue.min.js"></script>
66
66
 
67
- </script>
68
-
69
67
  <script>
70
68
 
71
69
  'use strict';

4

a

2016/06/09 03:07

投稿

mpyw
mpyw

スコア5223

test CHANGED
@@ -64,7 +64,7 @@
64
64
 
65
65
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.20/vue.min.js"></script>
66
66
 
67
- <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/0.7.2/vue-resource.min.js"></script>
67
+ </script>
68
68
 
69
69
  <script>
70
70
 

3

a

2016/06/09 03:06

投稿

mpyw
mpyw

スコア5223

test CHANGED
@@ -1,4 +1,4 @@
1
- Vue.jsを使うと簡単に実装できるのでサンプルを置いておきます．
1
+ [Vue.js](http://vuejs.org/)を使うと簡単に実装できるのでサンプルを置いておきます．
2
2
 
3
3
 
4
4
 
@@ -22,39 +22,43 @@
22
22
 
23
23
  <div id="app" v-cloak>
24
24
 
25
- 言語:
25
+ <div>
26
26
 
27
- <div v-for="i in n">
27
+ 言語:
28
28
 
29
- <select>
29
+ <div v-for="i in numbers.language">
30
30
 
31
- <option selected>選択してください▼</option>
31
+ <select>
32
32
 
33
- <option>日本語</option>
33
+ <option selected>選択してください▼</option>
34
34
 
35
- <option>英語</option>
35
+ <option>日本語</option>
36
36
 
37
- <option>フランス語</option>
37
+ <option>英語</option>
38
38
 
39
- <option>ドイツ語</option>
39
+ <option>フランス語</option>
40
40
 
41
- </select>
41
+ <option>ドイツ語</option>
42
42
 
43
- <select>
43
+ </select>
44
44
 
45
- <option selected>選択してください▼</option>
45
+ <select>
46
46
 
47
- <option>母語並みに話せる</option>
47
+ <option selected>選択してください▼</option>
48
48
 
49
- <option>ビジネスで困らない程度に話せる</option>
49
+ <option>母語並みに話せる</option>
50
50
 
51
- <option>日常会話で困らない程度に話せる</option>
51
+ <option>ビジネスで困らない程度に話せる</option>
52
52
 
53
+ <option>日常会話で困らない程度に話せる</option>
54
+
53
- </select>
55
+ </select>
56
+
57
+ </div>
58
+
59
+ <a v-on:click.prevent="++numbers.language" href="">追加する</a>
54
60
 
55
61
  </div>
56
-
57
- <a v-on:click.prevent="++n" href="">追加する</a>
58
62
 
59
63
  </div>
60
64
 
@@ -72,7 +76,11 @@
72
76
 
73
77
  data: {
74
78
 
79
+ numbers: {
80
+
75
- n: 1,
81
+ language: 1
82
+
83
+ }
76
84
 
77
85
  }
78
86
 

2

回答にあうように修正

2016/06/09 03:03

投稿

mpyw
mpyw

スコア5223

test CHANGED
@@ -1,21 +1,85 @@
1
- **【おわび】 質問の意味を読み違えました，スルーしてください**
1
+ Vue.jsを使うと簡単に実装できるのでサンプルを置いておきます．
2
2
 
3
3
 
4
4
 
5
+ ```html
6
+
7
+ <!DOCTYPE html>
8
+
9
+ <title>Sample</title>
10
+
11
+ <style>
12
+
13
+ [v-cloak] {
14
+
15
+ visibility: hidden;
16
+
17
+ }
18
+
19
+ </style>
20
+
21
+ <h1>Sample</h1>
22
+
23
+ <div id="app" v-cloak>
24
+
25
+ 言語:
26
+
27
+ <div v-for="i in n">
28
+
29
+ <select>
30
+
31
+ <option selected>選択してください▼</option>
32
+
33
+ <option>日本語</option>
34
+
35
+ <option>英語</option>
36
+
37
+ <option>フランス語</option>
38
+
39
+ <option>ドイツ語</option>
40
+
41
+ </select>
42
+
43
+ <select>
44
+
45
+ <option selected>選択してください▼</option>
46
+
47
+ <option>母語並みに話せる</option>
48
+
49
+ <option>ビジネスで困らない程度に話せる</option>
50
+
51
+ <option>日常会話で困らない程度に話せる</option>
52
+
53
+ </select>
54
+
55
+ </div>
56
+
57
+ <a v-on:click.prevent="++n" href="">追加する</a>
58
+
59
+ </div>
60
+
61
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.20/vue.min.js"></script>
62
+
63
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/0.7.2/vue-resource.min.js"></script>
64
+
65
+ <script>
66
+
67
+ 'use strict';
68
+
69
+ new Vue({
70
+
71
+ el: '#app',
72
+
73
+ data: {
74
+
5
- -----
75
+ n: 1,
76
+
77
+ }
78
+
79
+ });
80
+
81
+ </script>
82
+
83
+ ```
6
84
 
7
85
 
8
-
9
- Qiitaに直球の記事が上がってたのでリンクしておきます．
10
-
11
-
12
-
13
- - [Vue 0.11-rc2でselectタグのカスケードサンプルを書いてみた](http://qiita.com/wadahiro/items/65f385203e4c7830abb1)
14
-
15
-
16
-
17
- 私もこれに倣って少し書いてみました．
18
-
19
-
20
-
21
- - [Ajaxで連動したselectタグを生成する方法 @コメント](http://qiita.com/hibriiiiidge/items/0ad0eb9de7275b2f0110#comment-ef93fc86f950a9863d0d)

1

訂正

2016/06/09 02:56

投稿

mpyw
mpyw

スコア5223

test CHANGED
@@ -1,3 +1,11 @@
1
+ **【おわび】 質問の意味を読み違えました，スルーしてください**
2
+
3
+
4
+
5
+ -----
6
+
7
+
8
+
1
9
  Qiitaに直球の記事が上がってたのでリンクしておきます．
2
10
 
3
11