如何使用AlpineJS获取datalist选中选项的ID值？

问题出在你用id属性存储业务ID，且未正确匹配选中选项来提取对应ID。以下是基于Alpine.js的实现方案：

步骤说明 #

• 将选项的业务ID存入data-id属性（id是DOM元素的唯一标识，不适合存储业务数据）
• 监听输入框的input事件，每次选择或输入时，匹配对应选项并提取ID
• 将提取到的ID赋值给隐藏域，表单提交时即可发送ID而非显示值

完整代码 #

<label for="browser">Choose your browser from the list:</label>

<!-- Alpine.js 组件，绑定状态与事件 -->
<div x-data="{ selectedBrowserId: '' }">
  <input 
    type="text" 
    list="browsers" 
    name="browser" 
    id="browser"
    x-on:input="
      const selectedOption = document.querySelector(`#browsers option[value='${$event.target.value}']`);
      selectedBrowserId = selectedOption ? selectedOption.dataset.id : '';
    "
  >
  <datalist id="browsers">
    <option data-id="1" value="Firefox">
    <option data-id="2" value="Edge">
    <option data-id="3" value="Chrome">
  </datalist>

  <!-- 隐藏域绑定选中ID，表单提交时发送browserId参数 -->
  <input 
    id='browserId' 
    type='hidden' 
    name="browserId"
    x-bind:value="selectedBrowserId"
  />
</div>

代码解释 #

1. x-data：初始化Alpine组件状态selectedBrowserId，用于存储选中的浏览器ID
2. x-on:input：监听输入框的输入/选择事件，通过document.querySelector匹配当前值对应的option，提取其data-id赋值给selectedBrowserId
3. x-bind:value：将隐藏域的值与selectedBrowserId绑定，确保隐藏域始终与选中ID同步

用户选择Firefox后，隐藏域browserId的值会变为1，表单提交时将提交该ID值。

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