How to prevent same selected values in multiple drop down lists in a table & POST to server

问题

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

        });

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

来源：https://stackoverflow.com/questions/45683578/how-to-prevent-same-selected-values-in-multiple-drop-down-lists-in-a-table-pos

标签

javascript

jquery

html-select

dropdown