Question

我有一个表，其行可以动态创建。每个动态创建的行将有两个文本框和一个选择框。

我使用选择框让用户选择他们选择的产品。

问题是，我想限制用户选择多个相同的产品。

例如，如果用户在第一行中选择“气球”并单击“添加”以添加新行，则选择框中不应包含选择气球的选项。

在行动here

中查看

如果有任何jquery方法，那将是很好的，甚至原始的javasript也没问题。

提前致谢

Answer 1

这不酷，但看起来很适合模型。请看看。

<!DOCTYPE HTML>
<html>
<body>
  <table>
    <tr>
      <td>Product</td><td>Mfd_date</td><td>RRX(Qty)</td>
    </tr> 
    <tr>
      <td>
        <select id="selector">
        </select>
      </td> 
    </tr> 
  </table>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  <script type="text/javascript">
    var products = ['Baloon', 'Nachos', 'Cola'];  

    $('#selector').change(function() {
    var product = $('#selector').val();
        products.splice(products.indexOf(product), 1);
        addRow(product);
        updateSelector();
    });

    var addRow = function(product) {
        var row = $('<tr><td>' + product + '</td><td><input></td><td><input></td><td><button>Delete</button></td></tr>');
        $('table tr:last').before(row);
        $('button', row).click(function() {
          products.push($('td:first', row).text());  
          row.remove();
          updateSelector();
        });
    }

    var updateSelector = function() {
      $('#selector').toggle(products.length > 0);
      $('#selector').empty();
      $('#selector').append('<option></option>');
      for(var i=0; i<products.length; i++)
        $('#selector').append('<option>' + products[i] + '</option>');
    }

    updateSelector();
  </script>
</body>
</html>

Answer 2

我原以为你想要使用你的初始方法，只是让它工作而不是完全重写。因此，您可以将 insSpec 功能更改为此类

function insSpec()
    {
    rl=document.getElementById("insSpecc").rows.length;
    var a=document.getElementById("insSpecc").insertRow(rl);
    var h=a.insertCell(0);
    var f=a.insertCell(1);
    var m=a.insertCell(2);
    var n=a.insertCell(3);
    var select ='<div class="separator"><select id="prod_name'+rl+'" name="prod_name">';

    var prevSelectedProducts = new Array();

    $("select option:selected").each(function()
    {
        prevSelectedProducts.push($(this).text());
    });

    for(var i = 0; i < availableProducts.length; ++i) {
        if($.inArray(availableProducts[i], prevSelectedProducts) == -1) {
            select += '<option value="'+availableProducts[i].toLowerCase()+'">'+availableProducts[i]+'</option>';
        }
    } 

    delete prevSelectedProducts;

    h.innerHTML=select+'</select>';
    f.innerHTML='<input type="text" name="mfd_date[]" id="mfd_date'+rl+'" size="5"  />';
    m.innerHTML='<input type="text" name="client_rrx[]"  id="client_rrx'+rl+'" size="5"  />';
    n.innerHTML='<button   class="del_img" onClick="delSpec(this)"/>Delete</button></div>';

    }

我可能会第一次动态构建选择选项，但这种实现并不妨碍您更改已输入的选项。在选择完成后，将选择框转换为纯文本或其他内容可能会妨碍这一点。

如何在动态创建的选择框中限制值的重复？

2 个答案: