在预定义数组基础上设置多个 select 框（AlpineJS）

Question

我想用 select-boxes 创建一个多重过滤器列表，它已经可以创建 select 离子的计数。通过加载页面，可以预定义一些selectedEvents（通过GET参数+PHP设置）。我已经在网上搜索了很多但没有找到与 AlpineJS 类似的情况，如何将这些预定义值设置为“selected”。

在下面的示例中，我希望第一个 select 编辑了 ID 为 1000 的事件，第二个 select 编辑了 ID 1002 的事件。第三个没有 select离子在这种情况下。

有什么想法或建议吗？ :)

<section class="panel" x-data='{
        events: [
                { id: "1000", name: "My 1st cool event" },
                { id: "1001", name: "My 2nd cool event" },
                { id: "1002", name: "Just a better event" },
        ],
        selectedEvents: [ 1000, 1002 ],
        countFilter: 3
    }
'>
<template x-for="_ in Array.from({ length: countFilter })">
                <select name="event_id[]" required>
                    <option value="">Please choose</option>
                    <template x-for="event in events" :key="event.id">
                        <option :value="event.id" x-text="event.name"></option>
                    </template>
                </select><br>
            </template>
<button type="button" @click="countFilter++">Add selection</button>
            <button type="button" @click="countFilter--" x-show="countFilter > 1">Remove selection</button>
</section>

Answer 1

您可以通过绑定选项的 selected 属性来动态 select 默认选项，例如:selected="checkSelect(index, event.id)"。其中 checkSelect 是检查实际 select 元素是否具有提供的默认选项的函数。如果存在默认值并且当前选项的值等于默认选项，则它 returns true 因此当前选项将接收 selected 属性。

完整示例：

<section class="panel" x-data='{
        events: [
                { id: "1000", name: "My 1st cool event" },
                { id: "1001", name: "My 2nd cool event" },
                { id: "1002", name: "Just a better event" },
        ],
        selectedEvents: [ 1000, 1002 ],
        countFilter: 3,
        checkSelect(select_index, option_id) {
            return option_id == this.selectedEvents[select_index]
        },
    }
'>
<template x-for="(_, index) in Array.from({ length: countFilter })">
    <select name="event_id[]" required class="block">
    <option value="">Please choose</option>
    <template x-for="event in events" :key="event.id">
        <option :value="event.id" x-text="event.name" :selected="checkSelect(index, event.id)"></option>
    </template>
    </select>
</template>
<button type="button" @click="countFilter++">Add selection</button>
<button type="button" @click="countFilter--" x-show="countFilter > 1">Remove selection</button>
</section>

注意，我们还在第一个循环中添加了一个index变量，因此我们可以跟踪循环中当前的select元素（我们将其用作[=13的第一个参数=] 函数).

在预定义数组基础上设置多个 select 框（AlpineJS）

Set multiple select boxes on a predefined array base (AlpineJS)

alpine.js

alpinejs