Javascript 如何防止在表中的多个下拉列表中出现相同的选定值&；发送到服务器

示例：想象一个婴儿表，每行用户选择婴儿性别下拉列表，然后选择一个名称。我需要防止在整个表中重复选择名称，如果用户选择了Male&John，他将无法在另一行中再次选择该名称除了婴儿，我的

表格

有包含项目的行，而BillCodes是下拉列表。如果在下拉列表中禁用一个选择选项，则它不会发布到服务器

$（'.timecodedlid'）.find（'option[value='+$（this.val（）+']）.prop（'disabled'，true））工作但被禁用不会将所选值发布到服务器


问题：如何在第二个下拉列表中防止重复选择？当我找到答案的时候。但是，它们失败了，并且不会发布到服务器**<代码>$（'.timecodedldlid'）.find（'option[value='+$（this.val（）+']）.prop（'disabled'，true））不发布到服务器端


呈现的HTML代码段表，带有下拉行

 <tbody id="TS">
 <tr class="rowCss"> //ROW 1

<td>
  <span class="project">
    <select class="form-control projectcodeid" id="Records_0__SelectedProjectFromList" name="Records[0].SelectedProjectFromList">
      <option value="">Modeling</option>
      <option value="1">Ventosanzap</option>
      <option value="2">Modeling</option>
    </select>
  </span>
</td>
<td>
  <input type="hidden" name="Records.Index" value="0">
    <span class="billingcodeCss">
      <select class="form-control timecodeDdlId" id="Records_0__SelectedBillingCodesFromList" name="Records[0].SelectedBillingCodesFromList">
        <option value="">Budget-070</option>
        <option selected="selected" value="5">Budget-070  </option>
        <option value="6">Budget-784                                        </option>
      </select>
    </span>
  </td>
</tr>
<tr class="rowCss"> //ROW 2

  <td>
    <span class="project">
      <select class="form-control projectcodeid" id="Records_0__SelectedProjectFromList" name="Records[0].SelectedProjectFromList">
        <option value="">Modeling</option>
        <option value="1">Ventosanzap</option>
        <option value="2">Modeling</option>
      </select>
    </span>
  </td>
  <td>
    <input type="hidden" name="Records.Index" value="0">
      <span class="billingcodeCss">
        <select class="form-control timecodeDdlId" id="Records_0__SelectedBillingCodesFromList" name="Records[0].SelectedBillingCodesFromList">
          <option value="">Budget-070</option>
          <option selected="selected" value="5">Budget-070  </option>   // HOW TO PREVENT DUPLICATE AND STILL POST TO SERVER

          <option value="6">Budget-784                                        </option>
        </select>
      </span>
    </td>
  </tr> //

</tbody>


问题。。。如果您尝试获取此
$（'.timecodedldlid'）。查找（'option[value='+value+']）
。。。你能得到一个值吗？。。。禁用的元素不会发布到服务器（或者至少我永远无法从请求中获取它的值）。。。因此，您可以尝试添加样式规则而不是禁用它，并从选项中删除
指针事件
，以便无法选择它？只是一些想法。@davidespire不，你可以分享一个关于如何禁用样式元素的片段。我有另一个答案，可以避免它的指针事件。。。只是一个css道具，你可以设置它，看看它是否适合你的需要。这里：@davino这是一个有趣的方法，但请注意，在没有指针的地方，比如键盘标签，它是失败的。
    //Disable other previous/next selected TimeCodes On Change
    $('#TS').on('change', '.timecodeDdlId', function () { //baby name check

        //Is this the correct dropdown we are selecting why not $this?
        var allSelectedBillingCodeDropDown = $('#TS .timecodeDdlId option:selected');
        var thisBillingSelectedDropDown = $(this);
        var currentSelectBillingCode = $(this).val();
        // get exisiting vlaue seelections
        $.each(allSelectedBillingCodeDropDown, function (index, item) {
            if ($(item).val() == currentSelectBillingCode)
            {
                debugger;
                // remove this selection
                //selectedBillingCodeDropDown.find('option[value=' + currentSelectBillingCode + ']').remove();
                thisBillingSelectedDropDown.find('option[value=' + currentSelectBillingCode + ']').remove();
                //alert userd
                alert('Billing code cannot be the same');
                return false;
            }

            // $('#select_id').find('option[value=' + foo + ']').remove();
            //item.remove all

        });

You can try this way

    $(document).ready(function() {
          $("select").on('hover', function () {
                $previousValue = $(this).val();
            }).change(function() {
                $("select").not(this).find("option[value='"+ $(this).val() + "']").attr('disabled', true);
                $("select").not(this).find("option[value='"+ $previousValue + "']").attr('disabled', false);
            });
        });

    $("#confirm-form").submit(function(e) {
        e.preventDefault();
        $("select").find("option").removeAttr('disabled');
        document.getElementById('confirm-form').submit();
    });