如何实现Active Dropdown Menus选中后替换默认提示文本功能

该需求可通过监听下拉框的选中变化事件，同步修改默认提示文本实现，以下是不同场景的代码示例：

原生 JavaScript 实现 #

<!-- 下拉框DOM结构 -->
<select id="memberStatus">
  <option value="" selected disabled>Select one:</option>
  <option value="active">Active</option>
  <option value="inactive">Inactive</option>
</select>

const selectElement = document.getElementById('memberStatus')
selectElement.addEventListener('change', function() {
  // 定位到默认提示的禁用选项，修改其文本为当前选中项的文本
  const defaultTipOption = this.querySelector('option[disabled]')
  defaultTipOption.textContent = this.options[this.selectedIndex].textContent
})

Vue 3 实现 #

<template>
  <select v-model="selectedStatus">
    <option value="" disabled selected>{{ selectPlaceholder }}</option>
    <option value="active">Active</option>
    <option value="inactive">Inactive</option>
  </select>
</template>

<script setup>
import { ref, watch } from 'vue'
const selectedStatus = ref('')
const selectPlaceholder = ref('Select one:')

// 监听选中值变化，同步修改占位提示
watch(selectedStatus, (newVal) => {
  if (!newVal) return
  selectPlaceholder.value = newVal === 'active' ? 'Active' : 'Inactive'
})
</script>

React 实现 #

import { useState } from 'react'

function MemberStatusSelector() {
  const [selectedStatus, setSelectedStatus] = useState('')
  const [selectPlaceholder, setSelectPlaceholder] = useState('Select one:')

  const handleSelectChange = (e) => {
    const currentVal = e.target.value
    setSelectedStatus(currentVal)
    if (currentVal) {
      setSelectPlaceholder(currentVal === 'active' ? 'Active' : 'Inactive')
    }
  }

  return (
    <select value={selectedStatus} onChange={handleSelectChange}>
      <option value="" disabled>{selectPlaceholder}</option>
      <option value="active">Active</option>
      <option value="inactive">Inactive</option>
    </select>
  )
}

如果使用Element UI、Ant Design等前端组件库，实现逻辑一致，只需要监听下拉组件的选中事件，同步修改组件的placeholder属性即可。

内容的提问来源于stack exchange，提问作者mkdir.enzo