セレクトボックスで選択肢を選ぶと、
下に同じセレクトボックスと削除ボタンが表示されるところまではできています。
セレクトボックスでAを選択して新規セレクトボックスを追加します。
同じセレクトボックスで今度はBを選択すると、
セレクトボックスがさらに追加されてしまいます。
一つのセレクトボックスで選択して追加できる新規セレクトボックスは
一つにしたいのですが、
どのようにすればよろしいでしょうか。
制限を設ければよいのだろうとは思うのですが、
具体的な方法がわかりません。
また、「選択してください」を選択したときは、新規セレクトボックスを追加しないようにするため「選択してください」(name="select-default")以外を選択時のみに、
新規セレクトボックスを追加するように(!== 'select-default')としたのですが、
うまくいきません。
どのようにすればよいのか、ご教授いただけませんでしょうか。
HTML
1 <table id="t-table"> 2 <thead> 3 <tr> 4 <th>リスト選択</th> 5 <th>リスト名</th> 6 <th>追加/削除</th> 7 </tr> 8 </thead> 9 10 <tbody id="table-tbody"> 11 <tr> 12 <td> 13 <select name="rule_original" class="changeList"> 14 <option value="select-default">選択してください</option> 15 <option value="select-a">A</option> 16 <option value="select-b">B</option> 17 <option value="select-c">C</option> 18 </select> 19 </td> 20 <td>A</td> 21 <td> 22 <input value="-" type="button" class="removeList" /> 23 </td> 24 </tr> 25 </tbody> 26</table> 27 28
CSS
1#t-table { 2 width: 100%; 3 font-size: 14px; 4 border-collapse: collapse; 5} 6 7#t-table th, 8#t-table td { 9 border: 1px solid #ccc; 10 padding: 12px 8px; 11 text-align: center; 12} 13 14#t-table th { 15 background-color: #a33337; 16 color: #fff; 17} 18 19#t-table input, 20#t-table select { 21 width: 100px; 22 cursor: pointer; 23} 24 25#t-table i { 26 font-size: 18px; 27 color: #7cb342; 28} 29 30#t-table input[type='button'] { 31 background-color: #f0f0f0; 32 border: 1px solid #aaa; 33 border-radius: 2px; 34 box-shadow: 0 1px 2px #999; 35 font-size: 14px; 36} 37 38#table-tbody tr:first-child { 39 display: none; 40}
jQuery jQuery3.2.1使用
1 $(document).ready(function() { 2 // CSSで非表示にした1行目の行を複製し、その行の下に挿入 3 $('#table-tbody>tr') 4 .clone(true) 5 .insertAfter($('#table-tbody>tr')); 6 7 8//選択肢によって削除ボタンを表示 9$(function(){ 10 $('select[name="rule_original"]').change(function() { 11 if ($('select[name="rule_original"] option:selected').val() == 'select-default') 12 $('#table-tbody>tr') 13 .eq(0) 14 .clone(true) 15 .insertAfter( 16 $(this) 17 .parent() 18 .parent(), 19 ); 20 }); 21}); 22 23 24// 行を削除する 25 $(document).on('click', '.removeList', function() { 26 $(this) 27 .parent() 28 .parent() 29 .remove(); 30 }); 31}); 32
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/07/24 01:18
2019/07/24 01:36