在每个表格单元格中选中后删除下拉列表

Question

我有一个包含两行的表。

在每个td中，我的内容是一个选择下拉列表。

下面的图片全部都有。

我需要实现的是，我需要从一个td的下拉列表中选择一个选项，并从其他tds中删除该选项。

比如说我从第一个td的下拉列表1中选择一个值abc。

然后，必须从所有tds中的所有其他下拉列表中删除值abc。

以下是一些代码：

HTML：

<select id="sameidforalltds"><option> abc </option><option> def </option>/select>  

和jQuery：

var getAllSelect = $("#Tablelayout_2").find('select');
            var selectDropdownValue = $(this).find($("option:selected").val());
            if(!($(getAllSelect).has(selectDropdownValue)))
            {
                $('select').remove(selectDropdownValue);
            }

但这似乎不起作用。

请告诉我错的地方。

Answer 1

试试这个例子

<强> HTML

<select class="ddl">
<option value="0"> Select </option>
<option value="1"> One </option>
<option value="2"> Two </option>
<option value="3"> Three </option>
<option value="4"> Four </option>
<option value="5"> Five </option>
<option value="6"> Six </option>
</select>  
<select class="ddl">
<option value="0"> Select </option>
<option value="1"> One </option>
<option value="2"> Two </option>
<option value="3"> Three </option>
<option value="4"> Four </option>
<option value="5"> Five </option>
<option value="6"> Six </option>
</select>  
<select class="ddl">
<option value="0"> Select </option>
<option value="1"> One </option>
<option value="2"> Two </option>
<option value="3"> Three </option>
<option value="4"> Four </option>
<option value="5"> Five </option>
<option value="6"> Six </option>
</select>  
<select class="ddl">
<option value="0"> Select </option>
<option value="1"> One </option>
<option value="2"> Two </option>
<option value="3"> Three </option>
<option value="4"> Four </option>
<option value="5"> Five </option>
<option value="6"> Six </option>
</select>  
<select class="ddl">
<option value="0"> Select </option>
<option value="1"> One </option>
<option value="2"> Two </option>
<option value="3"> Three </option>
<option value="4"> Four </option>
<option value="5"> Five </option>
<option value="6"> Six </option>
</select>  

<强>脚本

$('.ddl').change(function(){
   if($(this).val()!="0") {  
       $('select[class="ddl"]').not($(this)).find('option[value="'+$(this).val()+'"]').remove();
   }
})

Working Fiddle

这会对你有帮助。

Answer 2

这是一个简单的香草解决方案，以防任何人感兴趣：

<强>样本：

JSFiddle

<强> HTML

<table id='TableLayout_2'>
<tr>
  <td><select onchange='change(this, 0)'><option>abc</option><option>def</option><option>ghi</option></select></td>
  <td><select onchange='change(this, 1)'><option>abc</option><option>def</option><option>ghi</option></select></td>
  <td><select onchange='change(this, 2)'><option>abc</option><option>def</option><option>ghi</option></select></td>
</tr>
</table>

<强>的JavaScript

function change(current, index) {
  var value = current.value;

  var selects = document.getElementById('TableLayout_2').getElementsByTagName('SELECT');
  for (var i = 0 ; i < selects.length ; i++){
    if (i === index)
      continue; // skip current select

    var toRemove = -1; 
    for (var j = 0 ;j < selects[i].options.length ; j++) {
      var text = selects[i].options[j].text;
      if (text == value)
        toRemove = j;

    }
    if (toRemove > -1)
      selects[i].removeChild(selects[i][toRemove]);
  }
}