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