如何在JavaScript的prompt中实现下拉选项预填充？

当然可以实现——原生prompt()弹窗并不支持下拉选择，但我们可以通过HTML元素结合JavaScript构建带固定选项的交互界面，彻底省去输入校验的循环逻辑。

实现思路 #

1. 用HTML的<select>标签创建下拉选择框，预先填入rock、paper、scissors三个固定选项，确保用户只能选择合法值
2. 用页面按钮触发每一轮的选择，替代原来的prompt()弹窗
3. 保留原有的游戏核心逻辑（CPU随机选择、胜负判断、计分规则），仅修改用户选择的获取方式

修改后的完整代码 #

<!DOCTYPE html>
<html>
<head>
    <title>Rock Paper Scissors</title>
</head>
<body>
    <div>
        <label for="choice">你的选择：</label>
        <select id="choice">
            <option value="rock">石头</option>
            <option value="paper">布</option>
            <option value="scissors">剪刀</option>
        </select>
        <button onclick="playRound()">出拳</button>
    </div>
    <div id="score">得分：玩家 0 - 0 电脑</div>
    <div id="message"></div>

    <script>
        // 初始化变量
        const gameOptions = ['rock', 'paper', 'scissors'];
        let cpuPoints = 0;
        let userPoints = 0;
        const scoreElement = document.getElementById('score');
        const messageElement = document.getElementById('message');
        const choiceSelect = document.getElementById('choice');

        function playRound() {
            // 游戏结束则不再响应
            if (userPoints >= 3 || cpuPoints >= 3) return;

            // CPU随机选择
            const cpuChoice = gameOptions[Math.floor(Math.random() * gameOptions.length)];
            // 获取用户选择（直接从下拉框取值，无需校验）
            const userChoice = choiceSelect.value;

            // 胜负判断
            if ((userChoice === 'rock' && cpuChoice === 'scissors') ||
                (userChoice === 'scissors' && cpuChoice === 'paper') ||
                (userChoice === 'paper' && cpuChoice === 'rock')) {
                userPoints++;
                messageElement.textContent = `恭喜！你赢了这一轮！电脑出了${cpuChoice}`;
            } else if (userChoice === cpuChoice) {
                messageElement.textContent = `平局！电脑也出了${cpuChoice}`;
            } else {
                cpuPoints++;
                messageElement.textContent = `哎呀，你输了这一轮！电脑出了${cpuChoice}`;
            }

            // 更新得分显示
            scoreElement.textContent = `得分：玩家 ${userPoints} - ${cpuPoints} 电脑`;

            // 判断游戏是否结束
            if (userPoints >= 3 || cpuPoints >= 3) {
                const finalMessage = userPoints > cpuPoints 
                    ? `恭喜你获胜！最终比分：玩家 ${userPoints} - ${cpuPoints} 电脑`
                    : `很遗憾，电脑获胜！最终比分：玩家 ${userPoints} - ${cpuPoints} 电脑`;
                messageElement.textContent = finalMessage;
            }
        }
    </script>
</body>
</html>

关键改动说明 #

• 移除了原代码中用于校验输入的嵌套while循环，因为下拉框的选项是固定且合法的，用户无法输入非法值
• 用页面交互替代弹窗，提升了用户体验，游戏过程更流畅
• 新增了得分和消息的实时显示，替代原有的alert()弹窗，交互更友好

内容的提问来源于stack exchange，提问作者Jon Garnett-Smith