teratail
回答率
85.46%
質問するログイン新規登録
トップに関する質問htmlとスクリプトで選択されたデータを配列に格納したい

編集履歴

質問編集履歴

12

内容修正

2021/06/22 06:51

投稿

koko5899
koko5899

スコア5

test CHANGED
File without changes
test CHANGED
@@ -10,7 +10,7 @@
10
10
 
11
11
  ②追加ボタンを押すと①で選択された選択値が変数に格納され、さらにリスト下に追加される
12
12
 
13
- ようにしたいです。
13
+ ようにしたいですが、うまくいきません。
14
14
 
15
15
  (削除ボタン左側が追加されたもの)
16
16
 

11

内容修正

2021/06/22 06:51

投稿

koko5899
koko5899

スコア5

test CHANGED
File without changes
test CHANGED
@@ -34,14 +34,6 @@
34
34
 
35
35
 
36
36
 
37
- ソース部分
38
-
39
-
40
-
41
- ```ここに言語を入力
42
-
43
- ------------------------------------------------------
44
-
45
37
  public class SelectListItem
46
38
 
47
39
  {
@@ -58,7 +50,7 @@
58
50
 
59
51
  List<SelectListItem> emptyList = new List<SelectListItem>();
60
52
 
61
- リストA：
53
+ リストAは下記のように入っています。
62
54
 
63
55
  {
64
56
 
@@ -72,7 +64,7 @@
72
64
 
73
65
  }
74
66
 
75
- リストB：
67
+ リストは下記のように入っています。
76
68
 
77
69
  {
78
70
 
@@ -81,6 +73,10 @@
81
73
  {code:"004", name:"事業所D", longName:"004:事業所D"}
82
74
 
83
75
  }
76
+
77
+ ```ここに言語を入力
78
+
79
+ ----------------------------------------------
84
80
 
85
81
  function ViewModel() {
86
82
 

10

内容修正

2021/06/22 05:53

投稿

koko5899
koko5899

スコア5

test CHANGED
File without changes
test CHANGED
@@ -64,7 +64,11 @@
64
64
 
65
65
  {code:"001", name:"事業所A", longName:"001:事業所A"},
66
66
 
67
- {code:"002", name:"事業所B", longName:"002:事業所B"}
67
+ {code:"002", name:"事業所B", longName:"002:事業所B"},
68
+
69
+ {code:"003", name:"事業所C", longName:"003:事業所C"},
70
+
71
+ {code:"004", name:"事業所D", longName:"004:事業所D"}
68
72
 
69
73
  }
70
74
 

9

内容修正

2021/06/22 05:30

投稿

koko5899
koko5899

スコア5

test CHANGED
File without changes
test CHANGED
@@ -1,10 +1,4 @@
1
1
  またおせわになります。
2
-
3
-
4
-
5
- 【困っていること】
6
-
7
- DropDownListで選択されたデータを配列に格納したいですが、格納されないようです。
8
2
 
9
3
 
10
4
 
@@ -12,11 +6,13 @@
12
6
 
13
7
  やりたいことはRazor Pages がレンダリングした結果の html の select 要素とか input 要素に対して JavaScript, jQuery, Knockout.js を使って
14
8
 
15
- ①テキストボックスにコードを入れると該当コードの選択値が自動に選択される
9
+ ①テキストボックスにコードを入れるとリストで該当コードの選択値が自動に選択される
16
10
 
17
- ②追加ボタンを押すと選択された選択値が下に追加される
11
+ ②追加ボタンを押すと①で選択された選択値が変数に格納され、さらにリスト下に追加される
18
12
 
19
13
  ようにしたいです。
14
+
15
+ (削除ボタン左側が追加されたもの)
20
16
 
21
17
  ![イメージ説明](446d12727816ae97f5bda1744ce6c472.png)
22
18
 
@@ -46,112 +42,72 @@
46
42
 
47
43
  ------------------------------------------------------
48
44
 
49
- function EmployeeModel(data) {
45
+ public class SelectListItem
50
46
 
51
- self.masters = { division: null, area: null, branch: null, company: null };
47
+ {
52
48
 
53
- self.currentDatas = {
49
+ public SelectListItem();
54
50
 
55
- division: ko.observable(),
51
+ public bool Selected { get; set; }
56
52
 
57
- area: ko.observable(),
53
+ public string Text { get; set; }
58
54
 
59
- branch: ko.observable(),
55
+ public string Value { get; set; }
60
56
 
61
- company: ko.observable()
57
+ }
62
58
 
63
- };
59
+ List<SelectListItem> emptyList = new List<SelectListItem>();
64
60
 
65
- self.attendDatas = {
61
+ リストA：
66
62
 
67
- division: ko.observableArray(data.attendDatas.division),
63
+ {
68
64
 
69
- area: ko.observableArray(data.attendDatas.area),
65
+ {code:"001", name:"事業所A", longName:"001:事業所A"},
70
66
 
71
- branch: ko.observableArray(data.attendDatas.branch),
67
+ {code:"002", name:"事業所B", longName:"002:事業所B"}
72
68
 
73
- company: ko.observableArray(data.attendDatas.company)
69
+ }
74
70
 
75
- };
71
+ リストB：
76
72
 
77
- self.addCompany = function () {
73
+ {
78
74
 
79
- self.addData("company", 1);
75
+ {code:"003", name:"事業所C", longName:"003:事業所C"},
80
76
 
81
- }
77
+ {code:"004", name:"事業所D", longName:"004:事業所D"}
82
78
 
83
- self.addData = function (type, level) {
79
+ }
84
80
 
85
- var addItem = self.currentDatas[type]();
81
+ function ViewModel() {
86
82
 
87
- if (ko.utils.arrayFirst(self.attendDatas[type](), function (item) { return item.code == addItem.code; }) == null) {
83
+ self.masters = { company: リストA };
88
84
 
89
- self.attendDatas[type].push(addItem);
85
+ self.currentDatas = { company: ko.observable() };
90
86
 
91
- 　　　｝
87
+ self.attendDatas = ｛ company: リストB }
92
88
 
93
- ｝
89
+ self.addData = function () {
94
90
 
95
- ------------------------------------------------------
91
+ var addItem = self.currentDatas["company"]();
96
92
 
97
- <td data-bind="if:editFlag">
93
+ self.attendDatas[type].push(addItem);
98
94
 
99
- @Html.TextBox("SearchCompanyCode", Model.CompanyCode, new { maxlength = 8, size = 6, data_bind = "event:{keyup: searchCodeTest}" })
95
+ }
100
96
 
101
- @Html.DropDownList("ListCompanyCode", emptyList, new { data_bind = "options: $root.masters.company, optionsValue: 'code', optionsText: 'longName', optionsCaption: '-選択してください-', value: currentDatas.company" })
97
+ }
102
98
 
103
- <input type="button" class="small-width" value="追加" data-bind="click: addCompany" />
99
+ ```
100
+
101
+
102
+
103
+ ```
104
+
105
+ @Html.DropDownList("CompanyCode", emptyList, new { data_bind = "options: masters.division, optionsValue: 'code', optionsText: 'longName', optionsCaption: '-選択してください-', value: currentDatas.company" })
106
+
107
+ <input type="button" class="small-width" value="追加" data-bind="click: addCompany" />
104
108
 
105
109
  </td>
106
110
 
107
111
 
108
112
 
109
-
110
-
111
- Dictionary<string, List<DivisionContainer>> attendDatas = new Dictionary<string, List<DivisionContainer>>()
112
-
113
- protected class DivisionContainer
114
-
115
- {
116
-
117
- public string code { get; set; }
118
-
119
- public string name { get; set; }
120
-
121
- public string longName { get; set; }
122
-
123
- public Boolean vFlag { get; set; }
124
-
125
- }
126
-
127
113
  ```
128
-
129
- ------------------------------------------------------
130
-
131
- 上記で、リストは正しく表示されます。
132
-
133
- $root.masters.companyは下記の形で正しく値が入ります。
134
-
135
- $root.masters.company　= new DivisionContainer[]
136
-
137
- 追加ボタンを押したときのコンソールエラーは下記です。
138
-
139
- ![イメージ説明](b202313dc2bad4e0a2e3185e7b134f20.png)
140
-
141
-
142
-
143
- 下記部分のvalueの部分が間違っていると思っていますが、原因不明でいます。
144
-
145
- ①のテキストボックスにコードを入れると該当コードの選択値が自動に選択されるところまでできます。
146
-
147
- @Html.DropDownList("ListCompanyCode", emptyList, new { data_bind = "options: $root.masters.company, optionsValue: 'code', optionsText: 'longName', optionsCaption: '-選択してください-', value: currentDatas.company" })
148
-
149
-
150
-
151
- 下記のようにoptionsValue: 'code'を除くと、手動選択で②の追加ボタンを押すと選択された選択値が下に追加されるということはできました。
152
-
153
- @Html.DropDownList("ListCompanyCode", emptyList, new { data_bind = "options: $root.masters.company, optionsText: 'longName', optionsCaption: '-選択してください-', value: currentDatas.company" })
154
-
155
-
156
-
157
- ソース抜粋したので、分かりづらいかも知りませんが、よろしくお願いします。

8

内容修正

2021/06/22 05:13

投稿

koko5899
koko5899

スコア5

test CHANGED
File without changes
test CHANGED
@@ -10,7 +10,13 @@
10
10
 
11
11
  【やりたいこと】
12
12
 
13
- やりたいことはRazor Pages がレンダリングした結果の html の select 要素とか input 要素に対して JavaScript, jQuery, Knockout.js を使って「下記選択リストから選択されたデータを変数に格納し、下に追加していきたい」です。
13
+ やりたいことはRazor Pages がレンダリングした結果の html の select 要素とか input 要素に対して JavaScript, jQuery, Knockout.js を使って
14
+
15
+ ①テキストボックスにコードを入れると該当コードの選択値が自動に選択される
16
+
17
+ ②追加ボタンを押すと選択された選択値が下に追加される
18
+
19
+ ようにしたいです。
14
20
 
15
21
  ![イメージ説明](446d12727816ae97f5bda1744ce6c472.png)
16
22
 
@@ -136,8 +142,16 @@
136
142
 
137
143
  下記部分のvalueの部分が間違っていると思っていますが、原因不明でいます。
138
144
 
145
+ ①のテキストボックスにコードを入れると該当コードの選択値が自動に選択されるところまでできます。
146
+
139
147
  @Html.DropDownList("ListCompanyCode", emptyList, new { data_bind = "options: $root.masters.company, optionsValue: 'code', optionsText: 'longName', optionsCaption: '-選択してください-', value: currentDatas.company" })
140
148
 
141
149
 
142
150
 
151
+ 下記のようにoptionsValue: 'code'を除くと、手動選択で②の追加ボタンを押すと選択された選択値が下に追加されるということはできました。
152
+
153
+ @Html.DropDownList("ListCompanyCode", emptyList, new { data_bind = "options: $root.masters.company, optionsText: 'longName', optionsCaption: '-選択してください-', value: currentDatas.company" })
154
+
155
+
156
+
143
157
  ソース抜粋したので、分かりづらいかも知りませんが、よろしくお願いします。

7

内容修正

2021/06/21 00:43

投稿

koko5899
koko5899

スコア5

test CHANGED
File without changes
test CHANGED
@@ -134,4 +134,10 @@
134
134
 
135
135
 
136
136
 
137
+ 下記部分のvalueの部分が間違っていると思っていますが、原因不明でいます。
138
+
139
+ @Html.DropDownList("ListCompanyCode", emptyList, new { data_bind = "options: $root.masters.company, optionsValue: 'code', optionsText: 'longName', optionsCaption: '-選択してください-', value: currentDatas.company" })
140
+
141
+
142
+
137
143
  ソース抜粋したので、分かりづらいかも知りませんが、よろしくお願いします。

6

言語修正

2021/06/20 23:15

投稿

koko5899
koko5899

スコア5

test CHANGED
@@ -1 +1 @@
1
- DropDownListで選択されたデータを配列に格納したい
1
+ htmlとスクリプトで選択されたデータを配列に格納したい
test CHANGED
@@ -10,7 +10,7 @@
10
10
 
11
11
  【やりたいこと】
12
12
 
13
- やりたいことは下記選択リストから選択されたデータを変数に格納し、下に追加していきたいです。
13
+ やりたいことはRazor Pages がレンダリングした結果の html の select 要素とか input 要素に対して JavaScript, jQuery, Knockout.js を使って「下記選択リストから選択されたデータを変数に格納し、下に追加していきたい」です。
14
14
 
15
15
  ![イメージ説明](446d12727816ae97f5bda1744ce6c472.png)
16
16
 

5

開発環境

2021/06/20 23:11

投稿

koko5899
koko5899

スコア5

test CHANGED
File without changes
test CHANGED
@@ -20,9 +20,17 @@
20
20
 
21
21
  Visual　Studio 2015
22
22
 
23
- 【開発言語】
23
+ EntityFramework version="5.0.0"
24
24
 
25
- C#
25
+ jQuery version="1.7.1.1"
26
+
27
+ knockoutjs version="2.1.0"
28
+
29
+ AspNet.Mvc version="4.0.20710.0"
30
+
31
+ AspNet.Razor version="2.0.20710.0"
32
+
33
+
26
34
 
27
35
  ソース部分
28
36
 

4

ソース変更

2021/06/18 06:56

投稿

koko5899
koko5899

スコア5

test CHANGED
File without changes
test CHANGED
@@ -116,6 +116,10 @@
116
116
 
117
117
  上記で、リストは正しく表示されます。
118
118
 
119
+ $root.masters.companyは下記の形で正しく値が入ります。
120
+
121
+ $root.masters.company　= new DivisionContainer[]
122
+
119
123
  追加ボタンを押したときのコンソールエラーは下記です。
120
124
 
121
125
  ![イメージ説明](b202313dc2bad4e0a2e3185e7b134f20.png)

3

開発言語とソース

2021/06/18 03:09

投稿

koko5899
koko5899

スコア5

test CHANGED
File without changes
test CHANGED
@@ -20,6 +20,10 @@
20
20
 
21
21
  Visual　Studio 2015
22
22
 
23
+ 【開発言語】
24
+
25
+ C#
26
+
23
27
  ソース部分
24
28
 
25
29
 
@@ -28,49 +32,51 @@
28
32
 
29
33
  ------------------------------------------------------
30
34
 
31
- function EmployeeModel(data) {
35
+ function EmployeeModel(data) {
32
36
 
33
- self.currentDatas = {
37
+ self.masters = { division: null, area: null, branch: null, company: null };
34
38
 
35
- division: ko.observable(),
39
+ self.currentDatas = {
36
40
 
37
- area: ko.observable(),
41
+ division: ko.observable(),
38
42
 
39
- branch: ko.observable(),
43
+ area: ko.observable(),
40
44
 
41
- company: ko.observable()
45
+ branch: ko.observable(),
42
46
 
43
- };
47
+ company: ko.observable()
44
48
 
45
- self.attendDatas = {
49
+ };
46
50
 
47
- division: ko.observableArray(data.attendDatas.division),
51
+ self.attendDatas = {
48
52
 
49
- area: ko.observableArray(data.attendDatas.area),
53
+ division: ko.observableArray(data.attendDatas.division),
50
54
 
51
- branch: ko.observableArray(data.attendDatas.branch),
55
+ area: ko.observableArray(data.attendDatas.area),
52
56
 
53
- company: ko.observableArray(data.attendDatas.company)
57
+ branch: ko.observableArray(data.attendDatas.branch),
54
58
 
55
- };
59
+ company: ko.observableArray(data.attendDatas.company)
56
60
 
57
- self.addCompany = function () {
61
+ };
58
62
 
59
- self.addData("company", 1);
63
+ self.addCompany = function () {
60
64
 
61
- }
65
+ self.addData("company", 1);
62
66
 
63
- self.addData = function (type, level) {
67
+ }
64
68
 
65
- var addItem = self.currentDatas[type]();
69
+ self.addData = function (type, level) {
66
70
 
67
- if (ko.utils.arrayFirst(self.attendDatas[type](), function (item) { return item.code == addItem.code; }) == null) {
71
+ var addItem = self.currentDatas[type]();
68
72
 
69
- self.attendDatas[type].push(addItem);
73
+ if (ko.utils.arrayFirst(self.attendDatas[type](), function (item) { return item.code == addItem.code; }) == null) {
70
74
 
71
- 　　　　　　｝
75
+ self.attendDatas[type].push(addItem);
72
76
 
73
- 　　　　｝
77
+ 　　　｝
78
+
79
+ ｝
74
80
 
75
81
  ------------------------------------------------------
76
82
 
@@ -83,6 +89,26 @@
83
89
  <input type="button" class="small-width" value="追加" data-bind="click: addCompany" />
84
90
 
85
91
  </td>
92
+
93
+
94
+
95
+
96
+
97
+ Dictionary<string, List<DivisionContainer>> attendDatas = new Dictionary<string, List<DivisionContainer>>()
98
+
99
+ protected class DivisionContainer
100
+
101
+ {
102
+
103
+ public string code { get; set; }
104
+
105
+ public string name { get; set; }
106
+
107
+ public string longName { get; set; }
108
+
109
+ public Boolean vFlag { get; set; }
110
+
111
+ }
86
112
 
87
113
  ```
88
114
 

2

ソース変更

2021/06/18 02:59

投稿

koko5899
koko5899

スコア5

test CHANGED
File without changes
test CHANGED
@@ -78,8 +78,6 @@
78
78
 
79
79
  @Html.TextBox("SearchCompanyCode", Model.CompanyCode, new { maxlength = 8, size = 6, data_bind = "event:{keyup: searchCodeTest}" })
80
80
 
81
- @*@Html.DropDownList("ListCompanyCode", emptyList, new { data_bind = "options: $root.masters.company, value: currentDatas.company, optionsValue: 'code', optionsText: 'longName', optionsCaption: '-選択してください-'" })*@
82
-
83
81
  @Html.DropDownList("ListCompanyCode", emptyList, new { data_bind = "options: $root.masters.company, optionsValue: 'code', optionsText: 'longName', optionsCaption: '-選択してください-', value: currentDatas.company" })
84
82
 
85
83
  <input type="button" class="small-width" value="追加" data-bind="click: addCompany" />

1

ソース変更

2021/06/18 02:40

投稿

koko5899
koko5899

スコア5

test CHANGED
File without changes
test CHANGED
@@ -1,16 +1,30 @@
1
1
  またおせわになります。
2
2
 
3
3
 
4
+
5
+ 【困っていること】
4
6
 
5
7
  DropDownListで選択されたデータを配列に格納したいですが、格納されないようです。
6
8
 
7
9
 
8
10
 
11
+ 【やりたいこと】
12
+
9
13
  やりたいことは下記選択リストから選択されたデータを変数に格納し、下に追加していきたいです。
10
14
 
11
15
  ![イメージ説明](446d12727816ae97f5bda1744ce6c472.png)
12
16
 
17
+
18
+
19
+ 【開発環境】
20
+
21
+ Visual　Studio 2015
22
+
13
23
  ソース部分
24
+
25
+
26
+
27
+ ```ここに言語を入力
14
28
 
15
29
  ------------------------------------------------------
16
30
 
@@ -60,9 +74,7 @@
60
74
 
61
75
  ------------------------------------------------------
62
76
 
63
-
64
-
65
- <td data-bind="if:editFlag">
77
+ <td data-bind="if:editFlag">
66
78
 
67
79
  @Html.TextBox("SearchCompanyCode", Model.CompanyCode, new { maxlength = 8, size = 6, data_bind = "event:{keyup: searchCodeTest}" })
68
80
 
@@ -72,7 +84,9 @@
72
84
 
73
85
  <input type="button" class="small-width" value="追加" data-bind="click: addCompany" />
74
86
 
75
- </td>
87
+ </td>
88
+
89
+ ```
76
90
 
77
91
  ------------------------------------------------------
78
92