Alpine.js中点击按钮显示所有x-show div并默认加载首项

你现有代码有两个核心逻辑错误，导致需求无法实现：

• 初始状态color赋值为空字符串，不匹配任何div的显示判断条件，页面加载时三个div全部隐藏，不符合默认显示第一个div的要求
• 「查看全部」按钮的点击事件用逗号表达式连续给color赋值，JS中逗号表达式只会返回最后一个运算值，点击后color最终只会等于'Orange'，单个字符串变量不可能同时匹配三个不同的值，自然无法实现同时显示三个div的效果

直接调整状态逻辑即可，不需要额外引入复杂逻辑：

<div x-data="{ color: 'Red', showAll: false }">
  
    <button @click="showAll = true">查看全部</button>

    <select x-model="color" @change="showAll = false">
        <option value="Red">Red</option>
        <option value="Orange">Orange</option>
        <option value="Yellow">Yellow</option>
    </select>
  
    <div x-show="showAll || color === 'Red'">Show on Load</div>
    <div x-show="showAll || color === 'Orange'">Orange</div>
    <div x-show="showAll || color === 'Yellow'">Yellow</div>
</div>

• 把color初始值直接设为'Red'，页面首次加载时会默认显示第一个Red对应的div
• 新增独立的布尔状态showAll控制全显状态，默认值为false。点击「查看全部」按钮时将该状态设为true，三个div的显示判断只要满足showAll为真就会展示，不需要修改原有下拉选择绑定的color值
• 给下拉选择框绑定change事件，只要用户手动切换下拉选项，就自动把showAll重置为false，切回单选项显示逻辑，避免全显状态下切换下拉选项无响应的问题

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