如何实现带有不可选中默认标题的Select input组件？

Got it! Let's break down how to create a select input with a disabled default caption — this is a common pattern and super easy to implement across vanilla HTML and popular frameworks.

Start with the basics: use a standard <select> element, then add a disabled, empty-value option as your default caption. This option will be shown initially but can't be selected by the user.

<select name="category" required>
  <!-- Disabled default caption -->
  <option value="" disabled selected>Choose a category...</option>
  <!-- Selectable options -->
  <option value="tech">Technology</option>
  <option value="art">Art & Design</option>
  <option value="food">Food & Cooking</option>
</select>

• disabled: Prevents users from selecting this option
• selected: Ensures it's the default visible option
• value="": Makes sure no invalid value is submitted with the form
• required: (Optional) Forces users to pick a valid option before submitting

For React, use a controlled component with state to manage the selected value. The disabled caption will be the initial visible option since we start with an empty value.

import { useState } from 'react';

function DisabledCaptionSelect() {
  const [selectedValue, setSelectedValue] = useState('');

  const handleChange = (e) => {
    setSelectedValue(e.target.value);
  };

  return (
    <select 
      value={selectedValue} 
      onChange={handleChange}
      required
    >
      <option value="" disabled>Choose a category...</option>
      <option value="tech">Technology</option>
      <option value="art">Art & Design</option>
      <option value="food">Food & Cooking</option>
    </select>
  );
}

In Vue, bind the select to a reactive ref with an empty initial value. The disabled option will be displayed by default until the user picks a valid choice.

<template>
  <select v-model="selectedValue" required>
    <option value="" disabled>Choose a category...</option>
    <option value="tech">Technology</option>
    <option value="art">Art & Design</option>
    <option value="food">Food & Cooking</option>
  </select>
</template>

<script setup>
import { ref } from 'vue';
const selectedValue = ref('');
</script>

Make the default caption look more like a hint with a quick CSS rule:

select option[disabled] {
  color: #999; /* Light gray for hint text */
}

If you're using a component library like Material UI, Ant Design, or Bootstrap, most of them have built-in props to handle this pattern (like placeholder or disabled on a default option). Let me know if you need help adapting this to a specific library!

内容的提问来源于stack exchange，提问作者Majid Ghafoorzade