Need to modify the code so that alert appears when user skips a drop down between already selected dropdowns

Question

   if (document.getElementById('actionId').value == 'recommendWithFin') {
        var curRevSeqId = document.getElementById('currentReviewerSequence').value;
        var allRevLen = allReviewersArray.length;
        if (allRevLen <= curRevSeqId) {
            alert('You must select the next approver before recommending the quote.');
            valid = valid && false;
        } else {
            for (var i = curRevSeqId; i <= allRevLen; i++) {
                if (allReviewersArray[i] == null || allReviewersArray[i] == '') {
                    alert('Please do not skip approver');
                    valid = valid && false;
                }
    
            }
    
        }
    }

I am trying to modify this code from the else part to generate an alert when a user skips any drop-down between previously selected drop-down.

To provide more context, consider a scenario where there are 10 drop-downs. The user selects a value in the first drop-down and skips drop-downs 2 to 5, instead selecting the 6th drop-down. In this case, an alert should be triggered, indicating that no drop-down should be skipped between previously selected drop-down.

However, it is important to note that the user is not required to select all 10 drop-down; it is their choice. Therefore, the alert should only appear when there is a drop-down skipped between already selected drop-down, and not when the user decides not to select every drop-down present.

Can you please modify the code to incorporate this functionality?

Tried many logics but the array is considering all the drop downs and alert message is triggered

Answer 1

I can't really help you modify your code as you didn't provide a working snippet to begin with, but this is a prof of concept on how to do what you want.

Basically you would want to:

1. Select your dropdowns
2. Listen for change events on them
3. Iterate over your dropdowns until you reach the current one while having a flag to signal if you had any empty ones before

const selects = document.querySelectorAll('select')

for (const select of selects) {
  select.addEventListener('change', (ev) => {
    let sawEmptySelectBefore = false
    for (const select of selects) {
    
      if (select === ev.target && sawEmptySelectBefore) {
        alert('You skipped a select')
        break;
      }


      if (select.value === '') {
        sawEmptySelectBefore = true
      }


    }
  })
}

<select>
  <option value=""> Select a value </value>
    <option value="2"> Value 2 </value>
      <option value="3"> Value 1 </value>
</select>

<select>
  <option value="">select a value </value>
    <option value="2"> Value 2 </value>
      <option value="3"> Value 1 </value>
</select>

<select>
  <option value=""> Select a value </value>
    <option value="2"> Value 2 </value>
      <option value="3"> Value 1 </value>
</select>

<select>
  <option value=""> Select a value</value>
    <option value="2"> Value 2 </value>
      <option value="3"> Value 1 </value>
</select>