jQuery 3.5.1 issue with .val() expressions in an OR chain

Why does the following snippet evaluate to TRUE? I have 2 empty fields and am checking their .val(). In jQuery 2.2.4, the following was correctly evaluating to FALSE, but when I switched to jQuery 3.5.1, it started evaluating to TRUE.

You can substitute 2.2.4 for 3.5.1 and see that it starts behaving differently.

if ($('#race').val() || $('#gender').val()) {
  console.log('Selections exist');
} else {
  console.log('Selections do NOT exist');
}
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>

<select id="race" name="races" class="select2 select2-hidden-accessible" multiple="" data-select2-id="race" tabindex="-1" aria-hidden="true">
  <option value="RACE_AI_AN" data-select2-id="41">American Indian or Alaska Native</option>
  <option value="RACE_ASIAN" data-select2-id="42">Asian</option>
  <option value="RACE_BL_AA" data-select2-id="43">Black or African American</option>
  <option value="RACE_NH_PI" data-select2-id="44">Native Hawaiian or Other Pacific Islander</option>
  <option value="RACE_WHITE" data-select2-id="45">White</option>
</select>
<br>
<select id="gender" name="gender" class="select2 select2-hidden-accessible" data-select2-id="gender" tabindex="-1" aria-hidden="true">
  <option value="" data-select2-id="28">Gender</option>
  <option value="GENDER_MALE">Male</option>
  <option value="GENDER_FEMALE">Female</option>
  <option value="GENDER_OTHER">Another Designation</option>
</select>



Read more here: https://stackoverflow.com/questions/66268867/jquery-3-5-1-issue-with-val-expressions-in-an-or-chain

Content Attribution

This content was originally published by gene b. at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: