Раскрывающийся список Javascript отключает опции

Question

У меня есть несколько выпадающих списков на странице регистрации для конференции. Гости должны выбрать свой первый и второй выбор дневных занятий. Итак, если гость выбирает «Свободное время» в раскрывающемся меню «Первый выбор», «Отпускное время» следует отключить в раскрывающемся меню «Второй выбор».

Я получил эту часть для работы. Если гость сначала выбирает из меню «Первый выбор», соответствующая опция отключается в меню «Второй выбор».

Однако мне не удалось найти решение, если гость сначала выбирает из меню «Второй выбор». Если это произойдет, они могут выбрать что угодно из меню «Первый выбор», и ничто не отключено. Вот моя функция:

function checkSelects(select1Id, select2Id) { 
    var select1 = document.getElementById(select1Id); 
    var select2 = document.getElementById(select2Id); 


    if (select1.value) { 
     for (var i = 0; i < select2.options.length; i++) { 
      var currentOption = select2.options[i]; 

      if (select1.value === currentOption.value) { 
       currentOption.disabled = true; 
      } else { 
       currentOption.disabled = false; 
      } 
     } 
    } 
} 

Пример того, как варианты для списка устанавливаются:

<p> 
    Sunday - First Choice<span class="required">*</span> 
</p> 
<div class="dropdown"> 
    <select id="selectOne" onchange="javascript:checkSelects('selectOne', 'selectTwo')"> 
     <option></option> 
     <option name="ActivitySunday1" id="ActSun1_Leisure" value="Leisure">Leisure Time</option> 
     <option name="ActivitySunday1" id="ActSun1_Duck" value="Duck and Fenway Tour">Boston Duck and Fenway Tour</option> 
     <option name="ActivitySunday1" id="ActSun1_Revealed" value="Boston Revealed">Boston Revealed</option> 
     <option name="ActivitySunday1" id="ActSun1_Cambridge" value="Cambridge and Harvard Tour">Cambridge and Harvard Tour</option> 
    </select> 
</div> 
<div id="actsun1Error" class="error" style="display: none;"> 
    Please select your Second choice of an afternoon activity for Sunday April 24th. 
</div> 
<p> Sunday - Second Choice<span class="required">*</span></p> 
<div class="dropdown"> 
    <select id="selectTwo" onchange="javascript:checkSelects('selectOne', 'selectTwo')"> 
     <option></option> 
     <option name="ActivitySunday2" id="ActSun2_Leisure" value="Leisure">Leisure Time</option> 
     <option name="ActivitySunday2" id="ActSun2_Duck" value="Duck and Fenway Tour">Boston Duck and Fenway Tour</option> 
     <option name="ActivitySunday2" id="ActSun2_Revealed" value="Boston Revealed">Boston Revealed</option> 
     <option name="ActivitySunday2" id="ActSun2_Cambridge" value="Cambridge and Harvard Tour">Cambridge and Harvard Tour</option> 
    </select> 
</div> 
<div id="actsun2Error" class="error" style="display: none;"> 
    Please select your Second choice of an afternoon activity for Sunday April 24th. 
</div> 

Спасибо за помощь!

Answer 1

Хорошо, теперь я считаю, что понимаю. Это может быть фактически разрешено путем внесения минимальных изменений в ваш HTML. Просто измените параметры, которые вы отправляете в событии onchange, для второго выбора, и вы можете использовать свой оригинальный javascript.

<p> 
    Sunday - First Choice<span class="required">*</span> 
</p> 
<div class="dropdown"> 
    <select id="selectOne" onchange="javascript:checkSelects('selectOne', 'selectTwo')"> 
     <option></option> 
     <option name="ActivitySunday1" id="ActSun1_Leisure" value="Leisure">Leisure Time</option> 
     <option name="ActivitySunday1" id="ActSun1_Duck" value="Duck and Fenway Tour">Boston Duck and Fenway Tour</option> 
     <option name="ActivitySunday1" id="ActSun1_Revealed" value="Boston Revealed">Boston Revealed</option> 
     <option name="ActivitySunday1" id="ActSun1_Cambridge" value="Cambridge and Harvard Tour">Cambridge and Harvard Tour</option> 
    </select> 
</div> 
<div id="actsun1Error" class="error" style="display: none;"> 
    Please select your Second choice of an afternoon activity for Sunday April 24th. 
</div> 
<p> Sunday - Second Choice<span class="required">*</span></p> 
<div class="dropdown"> 
    <select id="selectTwo" onchange="javascript:checkSelects('selectTwo', 'selectOne')"> 
     <option></option> 
     <option name="ActivitySunday2" id="ActSun2_Leisure" value="Leisure">Leisure Time</option> 
     <option name="ActivitySunday2" id="ActSun2_Duck" value="Duck and Fenway Tour">Boston Duck and Fenway Tour</option> 
     <option name="ActivitySunday2" id="ActSun2_Revealed" value="Boston Revealed">Boston Revealed</option> 
     <option name="ActivitySunday2" id="ActSun2_Cambridge" value="Cambridge and Harvard Tour">Cambridge and Harvard Tour</option> 
    </select> 
</div> 
<div id="actsun2Error" class="error" style="display: none;"> 
    Please select your Second choice of an afternoon activity for Sunday April 24th. 
</div> 

Для наглядности вы можете переименовать переменные в своем JS.

function checkSelects(sourceSelectId, targetSelectId) { 
    var sourceSelect = document.getElementById(sourceSelectId); 
    var targetSelect = document.getElementById(targetSelectId); 


    if (sourceSelect.value) { 
     for (var i = 0; i < targetSelect.options.length; i++) { 
      var currentOption = targetSelect.options[i]; 

      if (sourceSelect.value === currentOption.value) { 
       currentOption.disabled = true; 
      } 
      else { 
       currentOption.disabled = false; 
      } 
     } 
    } 
}