Are duplicate options in a single select good or bad?
If I have a list of countries (or anything really) with the most relevant ones at the top in a "Suggested" optgroup
, and then underneath I list out all (other) countries, should I duplicate those "Suggested" ones in the "All countries" optgroup
?
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select doesn't seem to mention anything about duplicate option
s, so from an HTML perspective it seems fine. But I'm curious about a UX perspective if either of these choices would be considered good or bad.
Example:
(NOTE: the below is a snippet of an actual listing of countries. In reality the list may be hundreds of options long.)
Choice 1: Duplicate the "Suggested" countries in the "All countries" optgroup
. This may be a more clear choice for a user if they didn't realize the option they're looking for was at the top, but it might also be a little odd for keyboard navigation by typing the country name if there are 2 available options:
<select name="country">
<option value="">Select...</option>
<optgroup label="Suggested">
<option value="United States">United States</option>
<option value="Germany">Germany</option>
<option value="Japan">Japan</option>
</optgroup>
<optgroup label="All Countries">
<option value="Antarctica">Antarctica</option>
<option value="Barbados">Barbados</option>
<option value="Croatia">Croatia</option>
<option value="El Salvador">El Salvador</option>
<option value="Gambia">Gambia</option>
<option value="Germany">Germany</option>
<option value="Haiti">Haiti</option>
<option value="Israel">Israel</option>
<option value="Japan">Japan</option>
<option value="Latvia">Latvia</option>
<option value="Mozambique">Mozambique</option>
<option value="Pakistan">Pakistan</option>
<option value="Tunisia">Tunisia</option>
<option value="United States">United States</option>
<option value="Yemen">Yemen</option>
<option value="Zimbabwe">Zimbabwe</option>
</optgroup>
</select>
Choice 2: don't duplicate the suggested options:
<select name="country">
<option value="">Select...</option>
<optgroup label="Suggested">
<option value="United States">United States</option>
<option value="Germany">Germany</option>
<option value="Japan">Japan</option>
</optgroup>
<optgroup label="All Countries">
<option value="Antarctica">Antarctica</option>
<option value="Barbados">Barbados</option>
<option value="Croatia">Croatia</option>
<option value="El Salvador">El Salvador</option>
<option value="Gambia">Gambia</option>
<option value="Haiti">Haiti</option>
<option value="Israel">Israel</option>
<option value="Latvia">Latvia</option>
<option value="Mozambique">Mozambique</option>
<option value="Pakistan">Pakistan</option>
<option value="Tunisia">Tunisia</option>
<option value="Yemen">Yemen</option>
<option value="Zimbabwe">Zimbabwe</option>
</optgroup>
</select>