Javascript 将PHP数组设置为使用从Json对象创建的下拉列表

我已经被困在这几天了，现在可以使用一些专家的意见

因此，作为一个个人/学习项目，我正在为我朋友的D&D游戏制作一个有趣的“角色关系跟踪器”。有了这个，我就有了一个虚拟地下城大师的DB表，以及他们为了测试代码而运行的游戏。我试图创建一个级联下拉列表，该列表由PHP混合生成，并作为提交新字符表单的一部分编码为JSON。它起作用了！除此之外，在包含选项信息的数据库中，一些DM的列表中只有一个游戏，而其他DM的列表中有多个游戏。对于那些单身者，JS列出了每一个字母作为一个不同的选择，而不仅仅是一个完整的选项。为了解决这个问题，我曾两次尝试重新设计PHP，但都没有成功。这些更改要么完全破坏了代码，要么没有导致任何更改

至于实际代码：

HTML

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

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

还有JS

var列表=；
函数chgm（值）{
if（value.length==0）document.getElementById（“chargm”）.innerHTML=“”；
否则{
var游戏=”；
for（列表中的categoryId[值]）{
游戏+=“”+列表[值][类别ID]+“”；
}
document.getElementById（“chargm”）.innerHTML=games；
}
}

简而言之，问题是：我在PHP（很可能是原因）或Javascript中犯了什么错误，导致单个对象组中的单词拆分为字母，而不是将完整单词显示为第二个下拉选项的唯一选项

---

或者更确切地说，如何让PHP在保留键的同时使单个条目显示为多维数组，从而使其在JSON对象中显示为数组？

不要把我的评论看得太严重 //你的旧密码是什么 ///这是我的评论

var列表={
“里德”：[“斯特拉德的诅咒”，“乌克”]，
“鲍勃”：[“斯特拉德的诅咒”，“fffts”]，
“jomama”：“blaal”，
“塔可”：“萨尔夫”
};
函数chgm（值）{
//if（value.length==0）document.getElementById（“chargm”）.innerHTML=“”；
///不使用==使用===
///避免使用innerHTML
var节点=document.getElementById（“chargm”）；
var期权；
如果（！值）{
appendChild（document.createElement（'options'）；
返回；
} 
//否则{
///请不要附加到字符串！
///假设您有7000个值，操作系统每次都可以获取字符串大小和
///（重新）分配新内存！！
//var游戏=”；
///var games=[]；//使用数组而不是！
///如果要在中使用，则必须确保list.hasOwnProperty（value）是否为true
//对于（列表中的游戏[值]）{
///for（Object.keys的var gammas（列表））{
///但我们已经知道我们在寻找什么，所以让我们检查一下：
if（list.hasOwnProperty（值））{
//好的，我们现在有了其他新的值，但是其他的值是什么呢？
//让我们为懒惰而杀掉一切吧
while（node.firstChild&&node.removeChild（node.firstChild））；
///重置标题
node.appendChild（document.createElement（'option'））.innerText='Game/RP Name'；
//游戏+=“”+列表[值][游戏]+“”；
///您的示例数组不一致，因此我们必须检查类型
if（！Array.isArray（list[value]））{
///对于阵列，请执行以下操作：
///games.push（“”+列表[游戏]+“”）；
option=node.appendChild（document.createElement（'option'）；
option.innerText=列表[值]；
option.value=列表[值]；
返回；
}
///否则
对于（列表[值]的var v）{
///对于阵列，请执行以下操作：
///游戏推送（“”+列表[游戏][值]+“”）；
option=node.appendChild（document.createElement（'option'）；
option.innerText=v；
option.value=v；
} 
}
//document.getElementById（“chargm”）.innerHTML=games；
///对于阵列，请执行以下操作：
///document.getElementById（“chargm”）.innerHTML=games.join（“”）；
}

DM/行政
里德
上下快速移动
乔玛
墨西哥玉米薄饼卷
游戏/RP名称

使用

数组_merge _recursive（）

的问题在于，它在创建深度时会产生不一致的结构

例如，如果有多个元素，请查看第一级键包含索引子数组，但如果只有一个元素存在，则会在第一级上创建关联数组

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。我建议您提供表单字段

s，以便选项仅包含实际选项

---

另一种完全不同的选择是，如果您不想在用户每次更改选择时都修改DOM，您可以打印所有预加载选项的辅助选择字段，然后“隐藏”它们。然后当用户更改主选择字段时，只需“显示”带有相关

id

的字段。这当然会创建更多的html标记（根据您的数据量，这可能有吸引力，也可能没有吸引力），但它会大大降低复杂性

$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]) {