如何将select和radiobutton与json绑定

Question

我有这个json和一系列选项，我想链接到这个选择和我在这个表单中的这个单选按钮。我想要的是，当我选择任何单选按钮选项时，我只能选择一系列json选项(例如，如果是一个看起来单身的男人，或者是一个以女性方式出现的单身女性(，问题是我无法使其工作，下面我传递了包括json 在内的部分代码

HTMl:

<!-- Sexo -->
<input type="Radio" name="Hombre" id="Hombre">Hombre
<input type="Radio" name="Mujer" id="Mujer">Mujer<br></br>

<li>
<label for="estado_civil">Estado Civil</label>
<select id="estado_civil" name="estado_civil">
</select>
</li><br>

JSON:

{
"Estados": {
"tipoPersona": "Hombre",
"estado_civil": [
{
"codEstado": "S",
"estado": "Soltero",
"descripcion": "Que no está unido en matrimonio a otra persona"
},
{
"codEstado": "C",
"estado": "Casado",
"descripcion": "Casado es el estado civil que adquiere una persona en el momento que contrae matrimonio"
},
{
"codEstado": "D",
"estado": "Divorciado",
"descripcion": "Que está separado de aquello a lo que está o debería estarunido o con lo que está o debería estar relacionado"
},
{
"codEstado": "V",
"estado": "Viudo",
"descripcion": " Que ha perdido, por fallecimiento, a su cónyuge y que no ha vuelto a casarse."
}
]
},
"tipoPersona": "Mujer",
"estado_civil": [
{
"codEstado": "S",
"estado": "Soltera",
"descripcion": "Que no está unido en matrimonio a otra persona"
},
{
"codEstado": "C",
"estado": "Casada",
"descripcion": "Casado es el estado civil que adquiere una persona en el momento que contrae matrimonio"
},
{
"codEstado": "D",
"estado": "Divorciada",
"descripcion": "Que está separado de aquello a lo que está o debería estarunido o con lo que está o debería estar relacionado"
},
{
"codEstado": "V",
"estado": "Viuda",
"descripcion": " Que ha perdido, por fallecimiento, a su cónyuge y que no ha vuelto a casarse."
}
]
}

和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(element =>{
console.log(element.tipoPersona);
var th = document.createElement("th");
var tr = document.createElement("tr");
contenido = "tipoPersona"+element.tipoPersona+"codEstado"+element.tipoPersona;
var txtContenido = document.createTextNode(contenido);
tr.appendChild(txtContenido);
th.appendChild(tr); 
document.getElementById("estado_civil").appendChild(th);
});
}
}
xmlhttp.open("GET","file:///F:/javascript%20recuperacion/ejercicio%20formulario/generated.json",true);

xmlhttp.send();

代码的其余部分在这里：https://jsfiddle.net/cvjt7y28/1/

Answer 1

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

• 您尝试将表行(tr(附加到表头单元格(th(，然后将这些单元格附加到select标记。这没有意义，因为单元格应该添加到行中，更重要的是，您没有使用表。因此，它们应该是option标签
• 您的json格式不正确：您没有关闭json对象，并且"Estados"；(缺少结束大括号(
• "Estados"；应该是一个可以迭代的对象数组(arraymembers.forEach(
• "Estados"；开头不应该有大写字母，或者你应该用myObj.Estados来称呼它
• 您的单选按钮没有值，只有名称和id

工作示例：

由于我不能使用您的ajax请求(跨源策略(，我将数据硬编码为var来演示解决方案。

let data = {
"Estados": [{
"tipoPersona": "Hombre",
"estado_civil": [
{
"codEstado": "S",
"estado": "Soltero",
"descripcion": "Que no está unido en matrimonio a otra persona"
},
{
"codEstado": "C",
"estado": "Casado",
"descripcion": "Casado es el estado civil que adquiere una persona en el momento que contrae matrimonio"
},
{
"codEstado": "D",
"estado": "Divorciado",
"descripcion": "Que está separado de aquello a lo que está o debería estarunido o con lo que está o debería estar relacionado"
},
{
"codEstado": "V",
"estado": "Viudo",
"descripcion": " Que ha perdido, por fallecimiento, a su cónyuge y que no ha vuelto a casarse."
}
]
}, {
"tipoPersona": "Mujer",
"estado_civil": [
{
"codEstado": "S",
"estado": "Soltera",
"descripcion": "Que no está unido en matrimonio a otra persona"
},
{
"codEstado": "C",
"estado": "Casada",
"descripcion": "Casado es el estado civil que adquiere una persona en el momento que contrae matrimonio"
},
{
"codEstado": "D",
"estado": "Divorciada",
"descripcion": "Que está separado de aquello a lo que está o debería estarunido o con lo que está o debería estar relacionado"
},
{
"codEstado": "V",
"estado": "Viuda",
"descripcion": " Que ha perdido, por fallecimiento, a su cónyuge y que no ha vuelto a casarse."
}
]
}]
};
var arraymembers = data.Estados;
arraymembers.forEach(element => {
var option = document.createElement("option");
var contenido = "tipoPersona" + element.tipoPersona + "codEstado" + element.tipoPersona;
option.innerHTML = contenido;
document.getElementById("estado_civil").appendChild(option);
});

<!-- Sexo -->
<input type="Radio" name="Hombre" id="Hombre" value="Hombre">Hombre
<input type="Radio" name="Mujer" id="Mujer" value="Mujer">Mujer<br></br>
<li>
<label for="estado_civil">Estado Civil</label>
<select id="estado_civil" name="estado_civil">
</select>
</li>

---

在您的问题中，您描述了一个与代码产生的结果完全不同的结果。我想你希望选项是"；"单一"Maried"；等等(在你的例子"Soltero"、"Casado"等(。

为了实现这个目标，你必须：

• 给出了"；Estados"；一个名称(例如"Hombre"one_answers"Mujer"(；Estados"；成为对象(就像您在示例中所做的那样(
• 给予两个单选按钮相同的名称(例如"Sexo"(以便只选择其中一个
• 为每个单选按钮添加一个事件侦听器(包括处理程序(
• 在该处理程序中获取所选的值并用它选择"0"的内部对象；Estados"；(性别："Hombre"或"Mujer"(
• 抓住物体"；estados_civil"；在该内部对象中，对其进行迭代，创建一个option标记，并用您希望在select标记中作为选项可见的数据("estado"(填充它
• 在每次单击开始时删除所有选项(插入新选项之前重置(

工作示例：

let data = {
"Estados": {
"Hombre": {
"tipoPersona": "Hombre",
"estado_civil": [
{
"codEstado": "S",
"estado": "Soltero",
"descripcion": "Que no está unido en matrimonio a otra persona"
},
{
"codEstado": "C",
"estado": "Casado",
"descripcion": "Casado es el estado civil que adquiere una persona en el momento que contrae matrimonio"
},
{
"codEstado": "D",
"estado": "Divorciado",
"descripcion": "Que está separado de aquello a lo que está o debería estarunido o con lo que está o debería estar relacionado"
},
{
"codEstado": "V",
"estado": "Viudo",
"descripcion": " Que ha perdido, por fallecimiento, a su cónyuge y que no ha vuelto a casarse."
}
]
},
"Mujer": {
"tipoPersona": "Mujer",
"estado_civil": [
{
"codEstado": "S",
"estado": "Soltera",
"descripcion": "Que no está unido en matrimonio a otra persona"
},
{
"codEstado": "C",
"estado": "Casada",
"descripcion": "Casado es el estado civil que adquiere una persona en el momento que contrae matrimonio"
},
{
"codEstado": "D",
"estado": "Divorciada",
"descripcion": "Que está separado de aquello a lo que está o debería estarunido o con lo que está o debería estar relacionado"
},
{
"codEstado": "V",
"estado": "Viuda",
"descripcion": " Que ha perdido, por fallecimiento, a su cónyuge y que no ha vuelto a casarse."
}
]
}
}
};
var radios = document.querySelectorAll('input[name=Sexo]');
for (i = 0; i < radios.length; i++) {
radios[i].addEventListener('click', function() {
document.getElementById("estado_civil").innerHTML = '';
var sexo = this.value;
var estados = data.Estados[sexo].estado_civil;
for (j = 0; j < estados.length; j++) {
var option = document.createElement("option");
option.innerHTML = estados[j].estado;
document.getElementById("estado_civil").appendChild(option);
}
});
}

<!-- Sexo -->
<input type="Radio" name="Sexo" id="Hombre" value="Hombre">Hombre
<input type="Radio" name="Sexo" id="Mujer" value="Mujer">Mujer<br></br>
<li>
<label for="estado_civil">Estado Civil</label>
<select id="estado_civil" name="estado_civil">
</select>
</li>