如何在MVC中通过模型类创建下拉框并显示数值而非名称

下面提供几种不同技术栈的实现方式，按需选择：

原生JavaScript实现 #

这种方式不需要依赖任何框架，直接用原生代码就能实现：

<!-- 下拉框和显示区域的HTML结构 -->
<select id="fruitSelect">
  <option value="1">苹果</option>
  <option value="2">香蕉</option>
  <option value="3">葡萄</option>
</select>
<p>选中的值：<span id="displayValue"></span></p>

// 绑定逻辑
const select = document.getElementById('fruitSelect');
const display = document.getElementById('displayValue');

// 页面加载时先显示默认选中的值
display.textContent = select.value;

// 监听下拉框的选择变化
select.addEventListener('change', function() {
  display.textContent = this.value;
});

jQuery实现 #

如果你的项目已经引入了jQuery，可以用更简洁的写法：

<select id="fruitSelect">
  <option value="1">苹果</option>
  <option value="2">香蕉</option>
  <option value="3">葡萄</option>
</select>
<p>选中的值：<span id="displayValue"></span></p>

$(function() {
  // 初始化显示默认值
  $('#displayValue').text($('#fruitSelect').val());
  
  // 监听选择变化
  $('#fruitSelect').on('change', function() {
    $('#displayValue').text($(this).val());
  });
});

Vue 3实现 #

如果用Vue框架，利用双向绑定可以快速实现：

<div id="app">
  <select v-model="selectedValue">
    <option value="1">苹果</option>
    <option value="2">香蕉</option>
    <option value="3">葡萄</option>
  </select>
  <p>选中的值：{{ selectedValue }}</p>
</div>

const { createApp } = Vue;

createApp({
  data() {
    return {
      selectedValue: '1' // 默认选中苹果对应的值
    };
  }
}).mount('#app');

灵活映射场景（值不写在option里） #

如果不想把对应值直接写在option的value属性中，可以用对象做映射：

// 定义水果和值的映射关系
const fruitValueMap = {
  '苹果': '1',
  '香蕉': '2',
  '葡萄': '3'
};

// 监听变化时通过选中的文本获取对应值
select.addEventListener('change', function() {
  const selectedFruit = this.options[this.selectedIndex].text;
  display.textContent = fruitValueMap[selectedFruit];
});

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