Javascript Dropdown lists disable options

Question

I have multiple dropdown lists on a registration page for a conference. Guests are supposed to select their first and second choice of afternoon activities. So, if a guest selects "Leisure time" in the First Choice dropdown menu, "Leisure Time" should be disable in the Second Choice dropdown menu.

I've gotten that part to work. If the guest selects from the First Choice menu first, the appropriate option is disable in the Second Choice menu.

However, I haven't managed to find a solution for if the guest selects from the Second Choice menu first. If that happens, they can select anything from the First Choice menu, and nothing is disabled. Here is my function:

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

An example of how the options for the dropdown list are set up:

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

Thanks for the help!

Can you post the rest of html (second select element)?

james_bond
– james_bond

2017-01-19 19:08:41 +00:00
Commented Jan 19, 2017 at 19:08 — james_bond
– james_bond, Commented Jan 19, 2017 at 19:08
Sure. See edit.

Urn_ee
– Urn_ee

2017-01-19 19:16:00 +00:00
Commented Jan 19, 2017 at 19:16 — Urn_ee
– Urn_ee, Commented Jan 19, 2017 at 19:16

Sidney Leake · Accepted Answer · 2017-01-19 19:51:41Z

1

Ok, now I believe I understand. This can actually be solved by making minimal changes to your HTML. Just reverse the parameters you send in the onchange event for the second select and you can use your original 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>

For clarity, you may want to rename your variables in your JS though.

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

edited Jan 19, 2017 at 19:51

answered Jan 19, 2017 at 19:11

Sidney Leake

362 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Urn_ee Over a year ago

I do need it to run though. If something is selected in the second drop down menu (Sunday Second Choice/selectTwo), I need that option to be disable in the First Choice menu. It works the opposite way (if First Choice is selected first), but I can't get it to work the other way. Hope that makes sense.

Urn_ee Over a year ago

Hm. This isn't working for me. It's just made the disable option for choosing First Choice first not work now. I don't usually work with javascript, can you be more specific about this part: "I do not believe you need to set an onchange event for the second select." Thanks.

Urn_ee Over a year ago

Ah, perfect! Thank you so much. This makes sense now.

Collectives™ on Stack Overflow

Javascript Dropdown lists disable options

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related