Select dropdown in HTML - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

What is the visible output of this select dropdown?

Look at the HTML code below. What will the user see in the dropdown menu when they click it?

HTML

<label for="fruits">Choose a fruit:</label>
<select id="fruits" name="fruits">
  <option value="apple">Apple</option>
  <option value="banana" selected>Banana</option>
  <option value="cherry">Cherry</option>
</select>

A A dropdown with only Banana option visible.

B A dropdown with options Apple, Banana, Cherry; Banana is selected by default.

C A dropdown with options Apple, Banana, Cherry; Cherry is selected by default.

D A dropdown with options Apple, Banana, Cherry; Apple is selected by default.

💡 Hint

Look for the 'selected' attribute inside the option tags.

The 'selected' attribute on the Banana option means Banana is the default visible choice in the dropdown.

📝 Syntax

intermediate

Which option causes a syntax error in this select dropdown?

Identify which select dropdown code snippet will cause a syntax error in HTML.

A <select><option value="1">One</option><option value="2">Two</option></select>

B >tceles/<>noitpo/<owT>"2"=eulav noitpo<>noitpo/<enO>"1"=eulav noitpo<>tceles<

C <select><option value="1">One<option value="2">Two</option></select>

D select><option value="1">One</option><option value="2">Two</option></select>

💡 Hint

Check if all option tags are properly closed.

Option C is missing the closing tag for the first option, causing invalid HTML syntax.

❓ accessibility

advanced

Which select dropdown is most accessible for screen readers?

Choose the select dropdown code that best supports screen reader users.

A <select><option>Red</option><option>Green</option><option>Blue</option></select>

B >tceles/<>noitpo/<eulB>noitpo<>noitpo/<neerG>noitpo<>noitpo/<deR>noitpo<>tceles<

C <select aria-label="Pick a color"><option>Red</option><option>Green</option><option>Blue</option></select>

D <label for="colors">Pick a color:</label><select id="colors"><option>Red</option><option>Green</option><option>Blue</option></select>

💡 Hint

Labels help screen readers understand form controls.

Option D uses a linked to the select by id, which is the best practice for accessibility.

❓ layout

advanced

How to make a select dropdown fill the full width of its container?

Given a select dropdown inside a container, which CSS rule makes the dropdown stretch to fill the container's width?

HTML

<div class="container">
  <select>
    <option>Option 1</option>
    <option>Option 2</option>
  </select>
</div>

A select { width: 100%; }

B select { display: inline; }

C select { max-width: 50%; }

D select { float: left; }

💡 Hint

Think about how to make an element take all available horizontal space.

Setting width to 100% makes the select fill the container's full width.

🧠 Conceptual

expert

What is the value of the select element after this user interaction?

Consider this HTML and JavaScript. The user selects the third option. What is the value of the select element after the change?

HTML

<select id="mySelect">
  <option value="a">Alpha</option>
  <option value="b">Beta</option>
  <option value="c">Gamma</option>
</select>

<script>
  const select = document.getElementById('mySelect');
  select.value = 'b';
  select.value = 'c';
</script>

A "c"

B "b"

C "a"

D undefined

💡 Hint

The last assignment to select.value sets the final value.

The select.value is set first to 'b', then immediately to 'c', so the final value is 'c'.