Alpine JS：将选择菜单的标签绑定到隐藏输入框

安全阿岳

2026-7-18

实现方法

你可以通过两种方式用Alpine.js获取select选中选项的标签文本，并填充到隐藏输入框中：

方案一：直接通过DOM引用获取

给select添加x-ref标识，直接访问选中选项的文本内容绑定到隐藏输入框：

<div x-data="{ color: '' }">
  <select x-model="color" x-ref="colorSelect">
    <option value="1">Red</option>
    <option value="2">Orange</option>
    <option value="3">Yellow</option>
  </select>

  <input type="hidden" x-bind:value="$refs.colorSelect.options[$refs.colorSelect.selectedIndex].text">
</div>

关键说明：

x-ref="colorSelect" 给select标记一个可通过Alpine.js访问的引用
$refs.colorSelect.selectedIndex 获取当前选中项的索引
options[索引].text 提取对应选项的标签文本，直接绑定到隐藏输入框的value属性

方案二：维护独立变量存储标签文本

在x-data中声明两个变量，分别存储选中项的value和标签文本，通过change事件更新：

<div x-data="{ colorValue: '', colorLabel: '' }">
  <select 
    x-model="colorValue"
    @change="colorLabel = $event.target.options[$event.target.selectedIndex].text"
  >
    <option value="1">Red</option>
    <option value="2">Orange</option>
    <option value="3">Yellow</option>
  </select>

  <!-- 存储标签文本的隐藏输入框 -->
  <input type="hidden" x-bind:value="colorLabel">
  <!-- 如果需要同时提交value值，可添加这个隐藏输入框 -->
  <input type="hidden" x-bind:value="colorValue">
</div>