如何在AlpineJS中监听下拉选择框变化并获取选中值？

核心问题是x-data绑定的组件名称和实际定义的函数名不匹配：

• 你在<div x-data="stest">里指定了stest作为组件标识，但实际定义的组件函数是mkwd()，两者完全不一致，导致Alpine无法找到对应的组件实例，自然无法触发handleChange方法。

修正步骤： #

方案一：统一x-data与函数名 #

把x-data的值改成对应函数名，同时注意函数调用要加括号：

<div x-data="mkwd()">
  <select x-model="selectedOption" @change="handleChange()">
    <option value="">Select Option</option>
    <option value="option1">Op 1</option>
    <option value="option2">Op 2</option>
  </select>
</div>

方案二：修改函数名匹配x-data标识 #

把定义的函数名改成stest()：

<script>
  function stest() {
    return {
      selectedOption: '',
      handleChange() {
        console.log('Selected:', this.selectedOption);
      },
    }
  }
</script>

额外优化建议 #

使用x-model绑定的select，其实可以不用手动绑定@change——x-model会自动同步选中值，如果你需要在值变化时触发逻辑，更推荐用Alpine的$watch监听：

function mkwd() {
  return {
    selectedOption: '',
    init() {
      this.$watch('selectedOption', (newVal) => {
        if (newVal) {
          console.log('Selected:', newVal);
        }
      })
    }
  }
}

这种方式更贴合Alpine的响应式设计，只要selectedOption发生变化就会触发日志输出。

修改完成后，切换下拉选项就能在控制台正常看到选中值的日志了。

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