如何防止表格中的多个下拉列表中的相同选定值POST到服务器 [英] How to prevent same selected values in multiple drop down lists in a table & POST to server

问题描述

示例：想象一个婴儿表，每行用户选择婴儿GenderDropDown ，然后选择一个名字。我需要防止在表格中选择重复的名称，如果用户选择Male&约翰，他不能再在另一行中选择那个。 除了婴儿，我的表包含包含Projects的行，而BillCodes包含DropDowns 。如果禁用下拉列表中的选择选项，则它不会POST到服务器！

$（'。timecodeDdlId'）。find（'option [value ='+ $（this）.val（）+']'）。prop（'disabled'，true）; 的作品但已禁用未将选定值POST到服务器

---

问题：如何我可以阻止在第二次下拉列表中重复选择吗？虽然我在那里

解决方案

 你可以这样试试
 
 $ （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（）; 
}）; 
  

Example: imagine a table of babies, with each row users selects baby GenderDropDown, then Selects a name. I need to prevent duplicate name selection across the table, If user select Male & John, he cannot select that again in another row. Except babies, My table has rows that contain Projects, and BillCodes as DropDowns. If disable an select option in dropdown, then it does not POST to server!

$('.timecodeDdlId').find('option[value=' + $(this).val() + ']').prop('disabled', true); works but disabled does not POST selected value to server

---

Question: How can I prevent duplicate selection in second dropdown? While I found answers on So here. However, they fail - and dont POSTING to server**. $('.timecodeDdlId').find('option[value=' + $(this).val() + ']').prop('disabled', true); does not POST to server side.

---

RENDERED HTML Snippet Table, with DropDown Rows

 <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 to prevent duplicate selections

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

这篇关于如何防止表格中的多个下拉列表中的相同选定值POST到服务器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！