Question

我正在使用javascript进行国际象棋益智应用。我想创建一个功能，以便用户可以从下拉菜单中选择一个谜题。使用名为Chess JS的库，使用此函数加载国际象棋位置：

game = new Chess("FEN string");

我有一个像这样的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'];

我正在生成一个下拉菜单：

<html>

     <select id="selectPuzzle">

      </select>

</html>
<script>
    var select = document.getElementById("selectPuzzle"); 
    var options = ["Kasparov-Mamedyarov", "Beliavsky-Timman"];

    for(var i = 0; i < options.length; i++) {
        var opt = options[i];
        var el = document.createElement("option");
        el.textContent = opt;
        el.value = opt;
        select.appendChild(el);
    }

</script>

我想这样做，以便当选择一个选项时，运行一个函数从puzzleArray加载一个新游戏，所以当你选择＆＃34; Kasparov-Mamedyarov＆＃34;从下拉列表中，将运行以下代码：

game = new Chess("puzzleArray[0]");

任何帮助都会很棒！

Answer 1

＆＃13;

var select = document.getElementById("selectPuzzle"); 
var options = ["Kasparov-Mamedyarov", "Beliavsky-Timman"];

for(var i = 0; i < options.length; i++) {
  var opt = options[i];
  var el = document.createElement("option");
  el.textContent = opt;
  el.value = opt;
  select.appendChild(el);
}

select.onchange = function(){
  console.log(this.value);
  //game = new Chess(this.value);
}

＆＃13;

  <select id="selectPuzzle"></select>

＆＃13;

你也可能想要添加一个＆＃34;空白＆＃34;起始值（空选项），或者还在页面加载时运行处理程序，因为在更改选项之前，onchange不会触发。（您无法选择＆＃34;预选的＆＃34;值，除非您先将其更改为其他内容）

Answer 2

＆＃13;

<html>

     <select id="selectPuzzle" onchange='usePlayer()'>

      </select>

</html>
<script>
  function usePlayer()
  {
    var select = document.getElementById("selectPuzzle"); 
    game = new Chess(select.value);
  }
    var select = document.getElementById("selectPuzzle"); 
    var options = ["Kasparov-Mamedyarov", "Beliavsky-Timman"];

    for(var i = 0; i < options.length; i++) {
        var opt = options[i];
        var el = document.createElement("option");
        el.innerHTML = opt;
        el.value = opt;
        select.appendChild(el);
    }

</script>

＆＃13;

试试这个。设置文本的内部html intsead：D 我还没有真正看到正在使用的文本属性。但一般来说我设置了内部HTML。希望有所帮助。评论是否还有其他问题。

不知道国际象棋课程的样子，但我在代码笔中定义了一个，并多次选择新的选项。

使用函数动态填充下拉列表

2 个答案: