如何防止在表中的多个下拉列表中选择相同的值并 POST 到服务器

Posted 2023-05-08

【中文标题】如何防止在表中的多个下拉列表中选择相同的值并 POST 到服务器

【英文标题】：How to prevent same selected values in multiple drop down lists in a table & POST to server

【发布时间】：2018-01-22 19:50:56

【问题描述】：

示例：想象一个table of babies，每一行用户选择婴儿GenderDropDown，然后选择一个名字。我需要防止跨表选择重复名称，如果用户选择男性和约翰，他不能在另一行中再次选择该名称。 除了婴儿，My table 的行包含 Projects，BillCodes 为 DropDowns。如果disable 是下拉列表中的选择选项，则它不会 POST 到服务器！

$('.timecodeDdlId').find('option[value=' + $(this).val() + ']').prop('disabled', true); 工作但禁用不会将所选值发布到服务器

---

问题：如何防止在第二个下拉菜单中重复选择？虽然我在 So here 上找到了答案。但是，它们失败了 - 并且不发布到服务器**。 $('.timecodeDdlId').find('option[value=' + $(this).val() + ']').prop('disabled', true); 不会 POST 到服务器端。

---

渲染的 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>

---

javascript OnChange 防止重复选择

    //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

        );

---

【问题讨论】：

问题...如果您尝试获取此$('.timecodeDdlId').find('option[value=' + value + ']')...您会从浏览器控制台中得到什么...您是否获得了值？...禁用的元素不会发布到服务器（或者至少我永远无法从请求中获得它的价值）......所以也许你可以尝试添加样式规则而不是禁用它？，并从选项中删除 pointer-events 使其无法被选中?只是一些想法。

@DavidEspino 你能分享一个关于如何使用样式元素禁用的sn-p。

好吧，我有另一个答案可以避免它的指针事件...只是一个 css 道具，您可以设置它以查看它是否符合您的需求。这里：***.com/questions/6657545/…

@DavidEspino 这是一种有趣的方法，但请在不涉及指针的地方，比如键盘标签失败。

【参考方案1】：

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();
    );