javascript - 设置 PHP 数组以使用从 Json 对象创建的下拉列表

Question

我已经坚持了几天了，可以使用一些专家建议!
所以，作为一个个人/学习项目，我正在为我 friend 的 D&D 游戏制作一个有趣的小“Angular 色关系追踪器”。有了这个，我有一个虚拟地牢大师的数据库表以及他们为了测试代码而运行的游戏。我正在尝试创建一个由 PHP 混合生成并编码为 JSON 的级联下拉列表，作为提交新字符表单的一部分。有用!除了在包含选项信息的数据库中，有些人的列表中只有一个 DM 的游戏，而其他人则有多个游戏用于同一个 DM。对于那些单例，JS 将每个字母都列为不同的选择，而不仅仅是单个完整选项。我已经尝试重新制作 PHP 两次以尝试解决这个问题，并通过一些 JS 尝试无济于事。这些更改要么完全破坏了代码，要么没有导致任何更改。
This fiddle is what it is doing with my best attempt
至于实际代码:
HTML

<div class="selectdiv">
        <select name="chargm" id="charadm" onChange="chgm(this.value);" required>
            <option value="" selected="true" disabled>Game Master</option>
            <?php foreach ($gameMasters as $masterName) { echo "<option value='". $masterName . "'>" . $masterName . "</option>"; } ?>
        </select>
    </div>
    <div class="selectdiv">
        <select name="chargame" id="chargm" required>
            <option value="" selected="true" disabled>Game Name</option>
        </select>
    </div>

这是 PHP(我知道它非常困惑和多余，但由于某种原因我无法以任何其他方式工作并且它完成了它的工作？)

//database connection stuff
$sqls = "SELECT * FROM datgames;";
$stmts = mysqli_query($conn, $sqls);
$resultcheck = mysqli_num_rows($stmts);
$gameMasters = array(); //create empty array of game masters.
$gameData = array(); //set up game list data array

//check if db can be read before contiuning.
if($resultcheck > 0){
  while($row = mysqli_fetch_assoc($stmts)){ //while there are rows, add to array
    $gameMasters[] = $row["datgamDM"]; //fill the gameMasters array with all gm's
    $gmdm = $row["datgamDM"]; //define gmdm as the game master of the row

    //copy existing info in gameData to preserve data
    $anotm = $gameData;

    //clear game data to reset it to avoid repeats
    unset($gameData);

    //create the key => value pair
    $tmpar[$gmdm] = $row["datgamName"];

    //merge the temp arrays and apply them to the global array
    $gameData = array_merge_recursive($anotm, $tmpar);

    //clear the temporary arrays to avoid repeats
    unset($anotm);
    unset($tmpar);
  }
}else{ exit(); } //if db can't be reached, break the code.

$gameMasters = array_unique($gameMasters);

//print_r($gameData); //making sure the array is right. this line is removed once this is working

以及当前使用此循环的 PHP 的确切 JSON 输出

{
    "Reid":[
        "Curse of Strahd",
        "ufkck"],
    "bob":[
        "Curse of Strahd",
        "fffs"]
    ,"jomama":"blaal",
    "taco":"salff"
};

和 JS adapted from divy3993's answer here

var list = <?php echo json_encode($gameData); ?>;

    function chgm(value) {
      if (value.length == 0) document.getElementById("chargm").innerHTML = "<option></option>";
      else {
        var games = "";
        for (categoryId in list[value]) {

          games += "<option>" + list[value][categoryId] + "</option>";
        }
        document.getElementById("chargm").innerHTML = games;
      }
    }

问题简而言之:我在 PHP(很可能是原因)或 Javascript 中做错了什么导致单对象组中的单词拆分为字母而不是将完整单词显示为第二个下拉选项的唯一选项？
或者更确切地说，如何让 PHP 使单个条目显示为多维数组，同时保留键，使其在 JSON 对象中显示为数组？

Answer 1

使用问题array_merge_recursive()是因为它会产生不一致的结构，因为它会产生深度。
例如，如果有多个元素，则第一级键包含索引子数组，但当只有一个元素存在时，会在第一级创建关联数组。 I explain this here and provide a simple demonstration .
来自 mysqli 的 query() 的结果集可以使用 foreach() 立即遍历，所以我推荐使用简洁的技术来设置直观的关联数组访问。

$result = [];
foreach ($conn->query("SELECT datgamDM, datgamName FROM datgames") as $row) {
    $result[$row["datgamDM"]][] = $row["datgamName"];
}
exit(json_encode($result));

这样，您就有了一致的结构——索引数组的关联数组。换句话说:

{
    "Reid":["Curse of Strahd","ufkck"],
    "bob":["Curse of Strahd","fffs"],
    "jomama":["blaal"],
    "taco":["salff"]
}

那么生活只会变得更容易。你只需要像这样迭代:

for (index in list[value]) {

至于您用来生成选择/选项标记的技术——我不会这样做，有多种方法可以做到，StackOverflow 上有大量页面为您解释了这些选项。
我通常不喜欢提供表单说明或标签作为字段顶部选项的 UI。我建议您提供表单字段 <label> s 以便期权仅包含真实期权。

作为一种完全不同的选择，如果您不想在每次用户进行选择更改时继续修改 DOM，您可以打印所有辅助选择字段并预加载其选项，然后“隐藏”它们。然后当用户更改主要选择字段时，只需“显示”具有相关 id 的字段。 .这当然会创建更多的 html 标记(这可能会或可能不会有吸引力，具体取决于您的数据量)，但它大大降低了 javascript 代码的复杂性，因为所有动态处理都是在页面加载时完成的。如果有一天，您想让您的主要选择字段成为“多选”，那么具有可切换的次要字段会很好地工作。 ......“类(class)马”等等。