Question

我有一个jsFiddle链接如下：

这里我添加和删除表格行，它对我来说很好。现在我想要实现的是假设用户向表中添加三行。从第一个选择控件用户选择选项Prosecco，然后在下一个产品选择控件中，该值不应出现。应出现其他三个剩余值。现在在第二个产品选择控件中，如果用户选择选项Tea，则在后续产品选择控件中，只应显示两个剩余值。这应该以相同的方式完成。用户添加的行数。当没有其他产品可供显示时，在剩余的产品选择控件中，应显示和选择消息 No Product 。怎么做到这一点？

HTML代码如下：

<table   id="blacklistgrid"  class="table table-bordered table-hover table-striped">
                      <thead>
                        <tr  id="Row1">
                          <th style="vertical-align:middle">Products</th>
                          <th style="vertical-align:middle">Pack Of</th>
                          <th style="vertical-align:middle">Quantity</th>
                          <th style="vertical-align:middle">Volume</th>
                          <th style="vertical-align:middle">Unit</th>
                          <th style="vertical-align:middle">Rebate Amount</th>
                        </tr>
                      </thead>
                      <tbody class="apnd-test">
                                                <tr id="reb1">
                          <td>
                            <div class="btn-group">
                              <select class="form-control prod_list" name="product_id"><option selected="selected" value="">
      Select Product
    </option><option value="8">
      Laptop an
    </option><option value="9">
      Prosecco
    </option><option value="10">
      Coffee
    </option><option value="11">
      Tea
    </option></select>
                            </div>
                          </td>
                          <td><input type="text" name="pack" id="pack" value="" class="form-control" size="8"/></td>
                          <td><input type="text" name="quantity" id="quantity" value="" class="form-control" size="8"/></td>
                          <td><input type="text" name="volume" id="volume" value="" class="form-control" size="8"/></td>
                          <td>
                            <div class="btn-group">
                              <select id="units" name="units" class="form-control">
                                <option value=""  selected='selected'>Select Unit</option>

                                <option value="5" >Microsecond</option>

                                <option value="7" >oz</option>

                                <option value="9" >ml</option>

                                <option value="10" >L</option>

                                <option value="12" >gms</option>
                                                               </select>
                            </div>
                          </td>
                          <td><input type="text" name="amount" id="amount" value="" class="form-control" size="9"/></td>
                        </tr>
                      </tbody>
                      <tfoot>
                        <tr id="reb2">
                          <td><button style="float:right; margin-bottom: 20px" class="btnAdd" type="button" class="btn btn-default" onclick="">&nbsp;Add</button></td>
                          <td></td>
                          <td></td>
                          <td></td>
                          <td></td>
                          <td></td>
                        </tr>
                      </tfoot>

                    </table>

jQuery代码如下：

$(document).ready(function () {
     $('.btnAdd').click(function () {
    var new_row = $('#reb1').clone();
    var tbody = $('tbody', '#blacklistgrid');
    var n = $('tr', tbody).length  + 1;
    new_row.attr('id', 'reb' + n);
    $(':input', new_row).not('.prod_list').remove();
    //new_row.find("td:eq(1)").html();
    $('<button style="color:#C00; opacity: 2;" type="button" class="close delete" data-dismiss="alert" aria-hidden="true">&times;</button>').appendTo( $(new_row.find('td:first')) );
    tbody.append(new_row);
    $('.delete').on('click', deleteRow);
   });    
    });

function deleteRow() {
  $(this).closest('tr').fadeOut('fast', function(){
    $(this).remove();
 });   
}

Answer 1

您只能通过将第i + 1行的选项绑定到第1..i行的选定值来实现此目的。（是的，我在这里算一个1）

请注意，第i行的约束将取决于前一行的值，这既是指定和编程的复杂程度，也不是非常直观易用。

例如，当用户选择第1行中的Prosecco，第2行中的Tea，然后改变主意并选择第1行中的Tea时会发生什么？第2行的选择会消失吗？那么第3行和第4行呢？...

一个问题是：你想要那种行为吗？有没有更好的方法向用户提供4个选项？

如何避免在多个选择控件中重复选择控制值？

1 个答案: