下拉选择框（Dropdown）无法选中选项及占位符样式适配问题

Let’s tackle your two select tag problems one by one—they’re both common form gotchas with straightforward fixes!

Problem 1: Can’t Select Any Options in Select Tags #

The main issue here is that you’re hardcoding the value prop on your select elements to static strings like "Nationality" or "Country", which don’t match any of your option values. Since this is a React app, controlled components require the select’s value to align with an option’s value to enable selection.

Fix: #

Remove the hardcoded value prop from your select tags. If you want to manage selection statefully (recommended for React forms), set up a state variable to track the selected value. Here’s the corrected code for your nationality select (uncontrolled version):

<select className="form-control contactInput dropdown">
  <option value="" hidden>Nationality</option>
  <option value="afghan">Afghan</option>
  <option value="albanian">Albanian</option>
  <option value="algerian">Algerian</option>
</select>

• The hidden attribute ensures the placeholder option doesn’t appear in the dropdown list after a selection is made.
• Without the fixed value prop, the select will correctly reflect the chosen option’s value.

For a controlled component approach (better for form state management):

import { useState } from 'react';

// Inside your component
const [nationality, setNationality] = useState("");

// In your form
<select 
  className="form-control contactInput dropdown"
  value={nationality}
  onChange={(e) => setNationality(e.target.value)}
>
  <option value="" hidden>Nationality</option>
  <option value="afghan">Afghan</option>
  {/* Add other options here */}
</select>

Problem 2: Placeholder Text Style Doesn’t Match Input Placeholders #

Your select’s placeholder is a regular option, so it inherits default option styling instead of matching your input placeholders. We’ll use CSS to target the placeholder option and align its style with your inputs.

Fix: #

First, add a custom class to your placeholder option:

<option value="" hidden className="select-placeholder">Nationality</option>

Then add this CSS to your stylesheet (matches Bootstrap’s default input placeholder style):

.select-placeholder {
  color: #6c757d; /* Bootstrap's default input placeholder color */
  font-style: italic; /* Match input placeholder italic styling if used */
}

Full Corrected Snippet for One Select #

Here’s how your nationality select looks after both fixes (uncontrolled version):

<div style={{ paddingBottom: "5px" }}>
  <select className="form-control contactInput dropdown">
    <option value="" hidden className="select-placeholder">Nationality</option>
    <option value="afghan">Afghan</option>
    <option value="albanian">Albanian</option>
    <option value="algerian">Algerian</option>
  </select>
</div>

Quick Extra Tip #

You can remove the readonly attribute from your placeholder options—it doesn’t affect select elements, and the hidden attribute already prevents the placeholder from being reselected. Apply these fixes to all select elements in your form for full consistency.

内容的提问来源于stack exchange，提问作者Jay Modi