Javascript 下拉列表禁用选项

Question

我在 session 注册页面上有多个下拉列表。客人应选择下午事件的第一和第二选择。因此，如果客人在“第一选择”下拉菜单中选择“休闲时间”，则应在“第二选择”下拉菜单中禁用“休闲时间”。

我已经让那部分工作了。如果客人首先从“第一选择”菜单中进行选择，则“第二选择”菜单中的相应选项将被禁用。

但是，如果客人首先从“第二选择”菜单中进行选择，我还没有找到解决方案。如果发生这种情况，他们可以从“首选”菜单中选择任何内容，并且不会禁用任何内容。这是我的功能:

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