基于JavaScript实现下拉菜单选择加载国际象棋棋局功能

没问题，这功能很好实现！核心就是给下拉菜单添加change事件监听器，当用户切换选项时，根据选中项的索引加载对应FEN字符串的棋局。下面是完整的解决方案：

步骤说明 #

1. 确保你的puzzleArray和谜题名称数组是一一对应的（你现在的代码已经满足这点）；
2. 给下拉菜单绑定change事件，触发时获取选中项对应的索引；
3. 用该索引从puzzleArray中取出FEN字符串，实例化Chess对象。

完整代码示例 #

<html>
  <head>
    <!-- 先确保引入Chess JS库，根据你的实际路径调整 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/chess.js/0.10.2/chess.min.js"></script>
  </head>
  <body>
    <select id="selectPuzzle"></select>

    <script>
      // 你的谜题FEN数组
      var puzzleArray = [
        '6R1/5q1p/3Qp1pk/p3Pp2/Ppr2P2/2P4P/6PK/8 w - - 0 1',
        'rnbqkbnr/ppp1p1pp/8/3p1p2/4P3/2P5/PP1P1PPP/RNBQKBNR w KQkq - 0 3'
      ];
      // 谜题名称数组，和puzzleArray索引一一对应
      var puzzleNames = ["Kasparov-Mamedyarov", "Beliavsky-Timman"];

      var select = document.getElementById("selectPuzzle");
      // 生成下拉选项：把选项的value设为对应索引，方便后续取值
      for(var i = 0; i < puzzleNames.length; i++) {
        var el = document.createElement("option");
        el.textContent = puzzleNames[i];
        el.value = i; // 这里存索引，比存名字更直接
        select.appendChild(el);
      }

      // 定义全局的game变量，方便后续操作
      let game;

      // 给下拉菜单添加change事件监听
      select.addEventListener('change', function() {
        // 获取选中的索引
        const selectedIndex = this.value;
        // 加载对应FEN的棋局
        game = new Chess(puzzleArray[selectedIndex]);
        
        // 可选：添加一些反馈，确认棋局加载成功
        console.log(`已加载谜题：${puzzleNames[selectedIndex]}`);
        console.log('当前棋局FEN：', game.fen());
      });

      // 可选：页面加载时默认加载第一个谜题
      window.addEventListener('load', function() {
        game = new Chess(puzzleArray[0]);
        console.log('默认加载第一个谜题：', puzzleNames[0]);
      });
    </script>
  </body>
</html>

关键细节解释 #

• 把option的value设为索引：这样在change事件里可以直接通过this.value拿到对应puzzleArray的位置，避免通过名字匹配的麻烦；
• 全局game变量：方便你后续对棋局进行其他操作（比如走棋、显示棋盘等）；
• 加载反馈：控制台输出可以帮助你调试，也可以改成页面上的文本提示，提升用户体验；
• 默认加载第一个谜题：页面打开时自动加载第一个棋局，避免用户初始看到空棋盘。

如果需要扩展更多谜题，只需要往puzzleArray和puzzleNames里添加对应元素即可，代码不需要做其他修改~

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