Svelte技术问题：如何通过按钮随机打乱下拉选择框选项？

你的代码存在几个关键问题，以下是修复方案：

问题1：绑定对象错误 #

select的bind:value绑定的是整个选项数组，不符合逻辑——下拉框的选中值应该是单个选项对象，而非整个数组。需要单独声明选中项变量。

问题2：循环变量命名冲突 #

{#each chifumi_1 as chifumi_1}会导致循环内部覆盖原数组变量，改用不同的别名（比如option）避免冲突。

问题3：点击事件执行时机错误 #

直接写on:click={shuffle(chifumi_1)}会在页面加载时立即执行函数，而非点击按钮时触发。需要用箭头函数包裹，确保点击时才调用。

问题4：Svelte响应式更新失效 #

原洗牌函数直接修改原数组，Svelte无法检测到数组内部变化。需要创建数组副本进行打乱，再重新赋值给原变量，触发响应式更新。

修正后的完整代码 #

<script>
    // 选项数组
    let chifumi_1 = [
        { id: 1, text: 'Paper' },
        { id: 2, text: 'Rock' },
        { id: 3, text: 'Scissor' }
    ];
    let chifumi_2 = [
        { id: 1, text: 'Paper' },
        { id: 2, text: 'Rock' },
        { id: 3, text: 'Scissor' }
    ];
    let chifumi_3 = [
        { id: 1, text: 'Paper' },
        { id: 2, text: 'Rock' },
        { id: 3, text: 'Scissor' }
    ];

    // 选中项变量
    let selected_1 = chifumi_1[0];
    let selected_2 = chifumi_2[0];
    let selected_3 = chifumi_3[0];

    // 修改洗牌函数：创建副本后打乱，返回新数组
    function shuffle(arr) {
        // 浅拷贝数组，避免修改原数组
        const a = [...arr];
        let j, x, i;
        for (i = a.length - 1; i > 0; i--) {
            j = Math.floor(Math.random() * (i + 1));
            x = a[i];
            a[i] = a[j];
            a[j] = x;
        }
        return a;
    }

    // 点击按钮时统一处理三个下拉框的打乱
    function handleShuffle() {
        chifumi_1 = shuffle(chifumi_1);
        chifumi_2 = shuffle(chifumi_2);
        chifumi_3 = shuffle(chifumi_3);
    }
</script>

<form class="pl-2">
    <select bind:value={selected_1}>
        {#each chifumi_1 as option}
            <option value={option}>
                {option.text}
            </option>
        {/each}
    </select>
    <select bind:value={selected_2}>
        {#each chifumi_2 as option}
            <option value={option}>
                {option.text}
            </option>
        {/each}
    </select>
    <select bind:value={selected_3}>
        {#each chifumi_3 as option}
            <option value={option}>
                {option.text}
            </option>
        {/each}
    </select>
</form>

<button 
    style="border: 1px solid;"
    on:click={handleShuffle}>
        Chifumi Randomizer
</button>

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