时间戳

首页 > 解决方案 > AlpineJs 选择框绑定文本而不是值

laravel - AlpineJs 选择框绑定文本而不是值

问题描述

我想将选择选项的文本绑定到跨度的文本。我想显示选择框的文本，而不是值。

<div class="w-full flex" x-data="{category:0}">
        <div class="relative w-auto" >
                 <span x-text="category"></span>
        </div>
        <select id="category" class="cursor-pointer" x-ref="category" x-model="category">
             <option value=0 selected="selected">One</option>
             <option value=1>Two</option>
             <option value=2>Three</option>
       </select>
</div>

现在，当我选择选项时，跨度显示 - 0、1、2。

我想显示“一”、“二”、“三”，而不是选择选项的文本。

我怎样才能做到这一点？

标签： laravel

解决方案

您只需要为您添加一个参考，select然后您就可以访问该options集合

selectedIndex您可以通过从属性中获取它的索引来访问您选择的

<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.1/dist/alpine.min.js" defer></script>
<div x-data="{category: 0}">
  <h1 x-text="$refs.categoryEL.options[$refs.categoryEL.selectedIndex].text"></h1>
  <select x-model="category" x-ref="categoryEL">
    <option value="0">one</option>
    <option value="1">two</option>
    <option value="2">three</option>
  </select>
</div>

推荐阅读