基于Alpine JS的x-data选择项动态修改表单action属性

核心思路 #

你的自定义Alpine下拉组件已经通过内部的value属性存储了选中城市的标识（比如fr对应巴黎、de对应柏林），我们只需要把这个value和表单的action关联起来，就能实现动态修改跳转地址。

具体修改步骤 #

1. 给表单添加响应式状态
   给表单加上x-data，用来管理选中的城市、各城市对应的跳转地址映射，以及复选框的状态：

   <form id="form1" name="form1" 
     x-data="{
       selectedCountry: null,
       // 替换成你实际的各城市对应跳转地址
       countryActionMap: {
         fr: 'https://buy.stripe.com/fr',
         de: 'https://buy.stripe.com/de',
         it: 'https://buy.stripe.com/it',
         gb: 'https://buy.stripe.com/gb',
         us: 'https://buy.stripe.com/us',
         jp: 'https://buy.stripe.com/jp'
       },
       show: false
     }"
     :action="selectedCountry ? countryActionMap[selectedCountry] : 'https://buy.stripe.com/'"
     x-init="$watch('$refs.countrySelect.value', (newVal) => { selectedCountry = newVal })"
   >
   

   • :action是Alpine的动态属性绑定，会根据选中的城市自动切换跳转地址
   • x-init里的$watch会监听下拉组件的value变化，实时更新表单的选中状态

2. 给下拉组件添加引用标识
   在下拉的div上加上x-ref="countrySelect"，让表单能访问到下拉组件的实例：

   <div 
     x-ref="countrySelect"
     x-data="select({ data: { fr: 'Paris 🇫🇷', de: 'Berlin 🇩🇪', it: 'Bologna 🇮🇹', gb: 'London 🇬🇧', 'us': 'NY 🇺🇸', 'jp': 'Tokyo 🇯🇵' }, emptyOptionsMessage: 'No cities match your search.', name: 'country', placeholder: 'Select a city' })"
     x-init="init()"
     @click.away="closeListbox()"
     @keydown.escape="closeListbox()"
   >
   

3. 修复复选框绑定问题
   原来的复选框x-text="show"会显示true/false，我们把它去掉，保留正常的协议文本：

   <div>
     <input type="checkbox" id="checkbox" x-model="show" >
     <label for="checkbox">
       By using our services you agree to the <a href=# class="underline">terms and conditions</a> of our platform
     </label>
   </div>
   

完整修改后的代码 #

<form id="form1" name="form1" 
  x-data="{
    selectedCountry: null,
    countryActionMap: {
      fr: 'https://buy.stripe.com/fr',
      de: 'https://buy.stripe.com/de',
      it: 'https://buy.stripe.com/it',
      gb: 'https://buy.stripe.com/gb',
      us: 'https://buy.stripe.com/us',
      jp: 'https://buy.stripe.com/jp'
    },
    show: false
  }"
  :action="selectedCountry ? countryActionMap[selectedCountry] : 'https://buy.stripe.com/'"
  x-init="$watch('$refs.countrySelect.value', (newVal) => { selectedCountry = newVal })"
>                        
<div 
  x-ref="countrySelect"
  x-data="select({ data: { fr: 'Paris 🇫🇷', de: 'Berlin 🇩🇪', it: 'Bologna 🇮🇹', gb: 'London 🇬🇧', 'us': 'NY 🇺🇸', 'jp': 'Tokyo 🇯🇵' }, emptyOptionsMessage: 'No cities match your search.', name: 'country', placeholder: 'Select a city' })"
  x-init="init()"
  @click.away="closeListbox()"
  @keydown.escape="closeListbox()"
>

<script>
function select(config) {
  return {
      data: config.data,

      emptyOptionsMessage: config.emptyOptionsMessage ?? 'No results match your search.',

      focusedOptionIndex: null,

      name: config.name,

      open: false,

      options: {},

      placeholder: config.placeholder ?? 'Select an option',

      search: '',

      value: config.value,

      closeListbox: function () {
          this.open = false

          this.focusedOptionIndex = null

          this.search = ''
      },

      focusNextOption: function () {
          if (this.focusedOptionIndex === null) return this.focusedOptionIndex = Object.keys(this.options).length - 1

          if (this.focusedOptionIndex + 1 >= Object.keys(this.options).length) return

          this.focusedOptionIndex++

          this.$refs.listbox.children[this.focusedOptionIndex].scrollIntoView({
              block: "center",
          })
      },

      focusPreviousOption: function () {
          if (this.focusedOptionIndex === null) return this.focusedOptionIndex = 0

          if (this.focusedOptionIndex <= 0) return

          this.focusedOptionIndex--

          this.$refs.listbox.children[this.focusedOptionIndex].scrollIntoView({
              block: "center",
          })
      },

      init: function () {
          this.options = this.data

          if (!(this.value in this.options)) this.value = null

          this.$watch('search', ((value) => {
              if (!this.open || !value) return this.options = this.data

              this.options = Object.keys(this.data)
                  .filter((key) => this.data[key].toLowerCase().includes(value.toLowerCase()))
                  .reduce((options, key) => {
                      options[key] = this.data[key]
                      return options
                  }, {})
          }))
      },

      selectOption: function () {
          if (!this.open) return this.toggleListboxVisibility()

          this.value = Object.keys(this.options)[this.focusedOptionIndex]

          this.closeListbox()
      },

      toggleListboxVisibility: function () {
          if (this.open) return this.closeListbox()

          this.focusedOptionIndex = Object.keys(this.options).indexOf(this.value)

          if (this.focusedOptionIndex < 0) this.focusedOptionIndex = 0

          this.open = true

          this.$nextTick(() => {
              this.$refs.search.focus()

              this.$refs.listbox.children[this.focusedOptionIndex].scrollIntoView({
                  block: "nearest"
              })
          })
      },
  }
}
</script>

</div>

<div>
  <input type="checkbox" id="checkbox" x-model="show" >
  <label for="checkbox">
    By using our services you agree to the <a href=# class="underline">terms and conditions</a> of our platform
  </label>
</div>

<button type="submit">Send &rarr;</button>
</form>

关键说明 #

• 你的下拉组件内部已经维护了选中项的value（比如选中巴黎时value为fr），我们通过x-ref获取组件实例，再用$watch监听这个值的变化
• 表单的action通过动态绑定实现，未选中城市时用默认地址，选中后切换为对应城市的地址
• 修复了复选框的显示问题，原来的x-text="show"会显示布尔值，现在已经移除，保留正常的协议文本

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