Ionic 3如何获取Select选项的显示文本而非值？

Got it, let's work through how to grab the displayed text of your selected Select option instead of just the value. I’ll cover a few common scenarios since you didn’t specify which framework you’re using—let’s start with the basics!

原生HTML/JavaScript场景 #

For plain vanilla HTML and JavaScript, this is straightforward. You can get the text by accessing the selected option element directly:

方法1：通过选中索引获取文本 #

const selectElement = document.getElementById('your-select-id');
const selectedText = selectElement.options[selectElement.selectedIndex].text;
console.log(selectedText); // 这就是你要的显示文本

方法2：通过选中状态匹配选项 #

const selectElement = document.getElementById('your-select-id');
const selectedOption = selectElement.querySelector('option:checked');
const selectedText = selectedOption ? selectedOption.text : ''; // 加个判断避免空值报错
console.log(selectedText);

React场景（以Ant Design Select为例，其他UI库逻辑类似） #

If you’re using a React UI library like Ant Design’s Select, the onChange event gives you more than just the value—you can access the full option object which includes the display text:

import { Select } from 'antd';

const options = [
  { value: '1', label: '第一个选项' },
  { value: '2', label: '第二个选项' },
];

const MySelect = () => {
  const handleChange = (value, option) => {
    console.log(option.label); // 这里就是你需要的显示文本
  };

  return (
    <Select
      options={options}
      onChange={handleChange}
      placeholder="请选择"
    />
  );
};

For a native React <select> element, the logic mirrors vanilla JS:

const MyNativeSelect = () => {
  const handleChange = (e) => {
    const selectedText = e.target.options[e.target.selectedIndex].text;
    console.log(selectedText);
  };

  return (
    <select onChange={handleChange}>
      <option value="1">第一个选项</option>
      <option value="2">第二个选项</option>
    </select>
  );
};

Vue场景（Vue 2/Vue 3通用） #

In Vue, you can either match the selected value to your options array or grab the text directly from the event object:

方法1：通过选项数组匹配文本 #

<template>
  <select v-model="selectedValue" @change="getSelectedText">
    <option v-for="item in options" :key="item.value" :value="item.value">
      {{ item.label }}
    </option>
  </select>
</template>

<script setup>
import { ref } from 'vue';

const options = ref([
  { value: '1', label: '第一个选项' },
  { value: '2', label: '第二个选项' },
]);
const selectedValue = ref('');

const getSelectedText = () => {
  const selectedItem = options.value.find(item => item.value === selectedValue.value);
  console.log(selectedItem?.label); // 使用可选链避免找不到项时报错
};
</script>

方法2：直接从事件对象提取文本 #

<template>
  <select @change="handleChange">
    <option value="1">第一个选项</option>
    <option value="2">第二个选项</option>
  </select>
</template>

<script setup>
const handleChange = (e) => {
  const selectedText = e.target.options[e.target.selectedIndex].text;
  console.log(selectedText);
};
</script>

At the end of the day, the core idea is the same across all scenarios: find the selected option element (or its corresponding object in your data) and extract its text content. That’s all you need to get the displayed text instead of just the value.

内容的提问来源于stack exchange，提问作者Miomir Dancevic