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

Question

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

        });

question... what do you get from your browser console if you try to get this `$('.timecodeDdlId').find('option[value=' + value + ']')`... do you even get a value?... disabled elements do not post to the server (or at least I'm never able to get it's value from the request) ... so maybe you can try to add a style rule instead of disabling it?, and remove the `pointer-events` from the option so it cannot be selected? just some ideas. — David Espino, Aug 14 '17 at 22:27
@DavidEspino can you share a snippet on how to disable with the style element. — Transformer, Aug 15 '17 at 04:33
Well I have another answer that would avoid the pointer events for it... Is just a css prop that you can set to see if it fits your needs. Here: https://stackoverflow.com/questions/6657545/setting-attribute-disabled-on-a-span-element-does-not-prevent-click-events/27723966#27723966 — David Espino, Aug 16 '17 at 00:14
@DavidEspino its an interesting approach, but please where there is no pointer involved, like a keyboard tab its failing. — Transformer, Aug 17 '17 at 16:49

score 1 · Answer 1 · answered Aug 18 '17 at 06:58

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

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

1 Answers1

Linked