Javascript 如何将select和radiobutton与json绑定？

我有一个json和一系列的选项，我想链接到这个select和这个单选按钮，我有这个表单。 我想要的是，当我选择任何一个radiobutton选项时，我只能选择一系列json选项（例如，如果是一个看起来单身的男人，或者如果是一个看起来单身的女人，用女性的方式说），问题是我无法让它工作，下面我传递了部分代码，包括json

HTMl:

霍姆布雷
Mujer



Estado Civil

JSON:

{
“Estados”：{
“提波波波索纳”：“Hombre”，
“estado_civil”：[
{
“codEstado”：“S”，
“estado”：“Soltero”，
“描述”：“没有任何关于母性和人格的描述”
},
{
“codEstado”：“C”，
“estado”：“Casado”，
“描述”：“婚姻契约中的公民权利”
},
{
“codEstado”：“D”，
“estado”：“Divorciado”，
“描述”：“你的生活是怎样的？”
},
{
“代码STADO”：“V”，
“estado”：“Viudo”，
“描述”：“你是谁，你是谁，你是谁？”
}
]
},
“蒂波珀索纳”：“穆杰尔”，
“estado_civil”：[
{
“codEstado”：“S”，
“estado”：“Soltera”，
“描述”：“没有任何关于母性和人格的描述”
},
{
“codEstado”：“C”，
“estado”：“Casada”，
“描述”：“婚姻契约中的公民权利”
},
{
“codEstado”：“D”，
“estado”：“离婚”，
“描述”：“你的生活是怎样的？”
},
{
“代码STADO”：“V”，
“estado”：“Viuda”，
“描述”：“你是谁，你是谁，你是谁？”
}
]
}

和javascript：

xmlhttp.onreadystatechange=function（）{
if（this.readyState==4&&this.status==200）{
var myObj=eval（“（“+this.responseText+”）；
console.log（myObj）；
var arraymembers=myObj.estados；
var contenido=“”；
arraymembers.forEach（元素=>{
console.log（element.tipoPersona）；
var th=document.createElement（“th”）；
var tr=document.createElement（“tr”）；
contenido=“tipoPersona”+element.tipoPersona+“codEstado”+element.tipoPersona；
var txtcontnido=document.createTextNode（contenido）；
tr.appendChild（txtcontnido）；
附肢儿童（tr）；
文件.getElementById（“estado_civil”）.appendChild（th）；
});
}
}
open（“GET”file:///F:/javascript%20recuperacion/ejercicio%20formulario/generated.json“，对）；
xmlhttp.send（）；

代码的其余部分如下所示：

---

我在您的代码中发现了一些问题：

• 您尝试将表行（

  tr

  ）附加到表头单元格（

  th

  ）中，然后将这些单元格附加到

  select

  标记中。这没有意义，因为单元格应该添加到行中，更重要的是，您没有使用表。因此，它们应该是

  选项

  标签
• 您的json格式不正确：您没有关闭json对象和“Estados”（缺少右括号）
• “Estados”应该是一个可以迭代的对象数组（

  arraymembers.forEach

  ）
• “Estados”的开头不应该有大写字母，或者你应该用

  myObj.Estados

• 您的单选按钮没有值，只有名称和id

工作示例：

因为我不能使用ajax请求（跨源策略），所以我将数据硬编码为var以演示解决方案

let数据={
“Estados”：[{
“提波波波索纳”：“Hombre”，
“estado_civil”：[
{
“codEstado”：“S”，
“estado”：“Soltero”，
“描述”：“没有任何关于母性和人格的描述”
},
{
“codEstado”：“C”，
“estado”：“Casado”，
“描述”：“婚姻契约中的公民权利”
},
{
“codEstado”：“D”，
“estado”：“Divorciado”，
“描述”：“你的生活是怎样的？”
},
{
“代码STADO”：“V”，
“estado”：“Viudo”，
“描述”：“你是谁，你是谁，你是谁？”
}
]
}, {
“蒂波珀索纳”：“穆杰尔”，
“estado_civil”：[
{
“codEstado”：“S”，
“estado”：“Soltera”，
“描述”：“没有任何关于母性和人格的描述”
},
{
“codEstado”：“C”，
“estado”：“Casada”，
“描述”：“婚姻契约中的公民权利”
},
{
“codEstado”：“D”，
“estado”：“离婚”，
“描述”：“你的生活是怎样的？”
},
{
“代码STADO”：“V”，
“estado”：“Viuda”，
“描述”：“你是谁，你是谁，你是谁？”
}
]
}]
};
var arraymembers=data.Estados；
arraymembers.forEach（元素=>{
var option=document.createElement（“选项”）；
var contenido=“tipoPersona”+element.tipoPersona+“codEstado”+element.tipoPersona；
option.innerHTML=contenido；
文件.getElementById（“estado_civil”）.附录C