Question

我在会议的注册页面上有多个下拉列表。客人应该选择下午的第一和第二选择活动。所以，如果客人选择＆＃34;休闲时间＆＃34;在First Choice下拉菜单中，＆＃34;休闲时间＆＃34;应该在Second Choice下拉菜单中禁用。

我已经让那部分工作了。如果guest虚拟机首先从First Choice菜单中选择，则在Second Choice菜单中禁用相应的选项。

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

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

Javascript下拉列表禁用选项

1 个答案: