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

【问题标题】：How to avoid repetition of select control values in multiple select controls?如何避免在多个选择控件中重复选择控件值？
【发布时间】：2014-05-01 12:40:31
【问题描述】：

我有一个 jsFiddle 链接如下：

http://jsfiddle.net/gHJ4B/1/

我在这里添加和删除表格行，它对我来说工作正常。现在我想要实现的是假设用户在表中添加三行。从第一个选择控件用户选择选项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();
 });   
}

【问题讨论】：

为什么不在这里发布代码，有问题？？？编辑：谢谢！ ;)
@A.Wolff：我现在已经添加了代码。

标签： jquery html html-table html-select option

【解决方案1】：

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

请注意，第 i 行的约束将取决于前面行的值，这既难以指定又难以编程，而且使用起来并不直观。

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

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

【讨论】：