teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

2

追記

2017/10/16 09:21

投稿

yambejp
yambejp

スコア117944

answer CHANGED
@@ -12,4 +12,70 @@
12
12
  基本的には1行目をcloneしてつかい、交代時間は1行目の値をベースに
13
13
  いらないデータを削除するかdisabledにするかでしょうか
14
14
  場合によってはajaxでデータをおくって初期値を調整する方法もありますが
15
- そこまでするほどではないかと。
15
+ そこまでするほどではないかと。
16
+
17
+ # sample
18
+ 以下ちょっとバグバグしてますが、ざっとした流れはこれでわかると思います。
19
+ focus時に削除処理をいれています
20
+
21
+
22
+ ```javascript
23
+ $(function() {
24
+ var out_mbr=["先発01","先発02","先発03","先発04","先発05","先発06","先発07","先発08","先発09","先発10","先発11"];
25
+ var in_mbr=["控え01","控え02","控え03","控え04","控え05","控え06"];
26
+ $(document).on('focus','select[name="change_time[]"]',function(){
27
+ var me=$(this);
28
+ me.find('option:gt(0)').remove();
29
+ for(var i=0;i<=120;i++){
30
+ me.append($('<option>').val(i).text(i));
31
+ };
32
+ var v=parseInt(me.closest('.row').prev('.row').find('select[name="change_time[]"]').val());
33
+ me.find('option').filter(function(){return $(this).val()!="" && parseInt($(this).val())<v;}).remove();
34
+
35
+ });
36
+ $(document).on('focus','select[name="out_mbr[]"]',function(){
37
+ var me=$(this);
38
+ me.find('option:gt(0)').remove();
39
+ out_mbr.forEach(function(i){ me.append($('<option>').val(i).text(i));});
40
+ $('select[name="out_mbr[]"]').filter(function(){return $(this).val()!=="";}).each(function(){
41
+ var v=$(this).val();
42
+ me.find('option').filter(function(){return $(this).val()==v;}).remove();
43
+ });
44
+ });
45
+ $(document).on('focus','select[name="in_mbr[]"]',function(){
46
+ var me=$(this);
47
+ me.find('option:gt(0)').remove();
48
+ in_mbr.forEach(function(i){ me.append($('<option>').val(i).text(i));});
49
+ $('select[name="in_mbr[]"]').filter(function(){return $(this).val()!=="";}).each(function(){
50
+ var v=$(this).val();
51
+ me.find('option').filter(function(){return $(this).val()==v;}).remove();
52
+ });
53
+ });
54
+ $(document).on('click','[type=button][value=追加]',function(){
55
+ var r1=$(this).closest('.row');
56
+ var r2=r1.clone();
57
+ r2.find('[type=button][value=削除]').css('visibility','visible').prop('disabled',false);
58
+ r1.after(r2);
59
+ });
60
+ $(document).on('click','[type=button][value=削除]',function(){
61
+ $(this).closest('.row').remove();
62
+ });
63
+ });
64
+
65
+ ```
66
+ ```HTML
67
+ <div class="row">
68
+ <select name="change_time[]">
69
+ <option value="">交代時間</option>
70
+ </select>
71
+ 交代選手名
72
+ <select name="out_mbr[]">
73
+ <option value="">OUT選手</option>
74
+ </select>
75
+ <select name="in_mbr[]">
76
+ <option value="">IN選手名</option>
77
+ </select>
78
+ <input type="button" value="削除" style="visibility:hidden" disabled>
79
+ <input type="button" value="追加">
80
+ </div>
81
+ ```

1

追記

2017/10/16 09:21

投稿

yambejp
yambejp

スコア117944

answer CHANGED
@@ -4,6 +4,10 @@
4
4
  データの属性が最初から違うのでは?
5
5
  データ構造を変えないとどちらにしてもロジックがおかしいことになると思います。
6
6
 
7
+ また1行目のクリアの位置が2行目には削除というのはあまりよくありません。
8
+ 1行目がクリアなら2行目にもクリアを置き別途削除を置きます
9
+ そうでないなら1行目のクリアは辞めたほうがいいでしょう。
10
+
7
11
  全体の流れとしては
8
12
  基本的には1行目をcloneしてつかい、交代時間は1行目の値をベースに
9
13
  いらないデータを削除するかdisabledにするかでしょうか