Question

我有一个Json文件，有两个类型128和137。我想通过javascript生成一个表单。我想生成输入框，如果类型为128，则生成选择框，如果类型为137，并且想要动态生成它。我希望生成的形式是这样的：

<form action="">
  name:<br>
  <input type="text" class="input1" id="input1" data-value="0">
  <br>
  gender:<br>
  <select class="input1" id="input1" data-value="0"><option>gender</option><option value="0">famale</option><option value="1">male</option></select>
  <br><br>
  <input type="submit" value="Submit">
</form>

我也无法定义每个属性而不是输入或选择框的选项。

我编写了以下代码，但它不起作用。

这是我的Javascript代码：

for (var i = 0; i < schema.length; i++) {
    var type=schema[i].type
    if(type==128){}

    if(type==137){
        var str = "<select><option>gender</option>";
        for (var j = 0; j < schema[i].values.length; j++) {
            str +="<option value='"+i+"'>"+schema[i].values[j].value.title+"</option>"
        }
        str +='</select>'
        var x=document.getElementById('option'); x.innerHTML=str;
    }
}

这是我的Json文件：

 {
    "queestion":"name" ,
    "type":"128",
    "attrs":[
        {"attr":{
            "name":"class",
            "value":"input1"
        }},
        {"attr":{
            "name":"id",
            "value":"input1"
        }},
        {"attr":{
            "name":"data-value",
            "value":"0"
        }}
    ]

},
{
    "queestion":"gender" ,

    "type":"137",
    "attrs":[
        {"attr":{
            "name":"class",
            "value":"input1"
        }},
        {"attr":{
            "name":"id",
            "value":"input1"
        }},
        {"attr":{
            "name":"data-value",
            "value":"0"
        }}
    ],
    "values":[
        {"value":{
            "title":"famale",
            "value":"0"
        }},
        {"value":{
            "title":"male",
            "value":"1"
        }}
    ]
}

Answer 1

上面的代码存在很多问题。

首先，您的HTML没有id值为＃34;选项＆＃34;的元素。您需要使用值选项

添加id

str +="<option value='"+i+"'>"+schema[i].values[j].value.title+"</option>"

第二期，检查行

str +="<option value='"+j+"'>"+schema[i].values[j].value.title+"</option>"

应替换为

for (var i = 0; i < schema.length; i++) {
    var type=schema[i].type;
    if(type==128){}

    if(type==137){
        var str = "<select><option>gender</option>";
        for (var j = 0; j < schema[i].values.length; j++) {
            str +="<option value='"+j+"'>"+schema[i].values[j].value.title+"</option>"
        }
        str +='</select>'
        var x=document.getElementById('option'); x.innerHTML=str;
    }
}

检查更新的javascript

  PackageInfo pinfo = null;
    try {
        pinfo = getPackageManager().getPackageInfo(getPackageName(), 0);
    } catch (PackageManager.NameNotFoundException e) {
        e.printStackTrace();
    }
    int versionNumber = pinfo.versionCode;
    String versionName = pinfo.versionName;

Answer 2

这是最后的灵魂：

＆＃13;

var schema = [{
    "queestion":"name" ,
    "type":"128",
    "attrs":[
        {"attr":{
            "name":"class",
            "value":"input1"
        }},
        {"attr":{
            "name":"id",
            "value":"input1"
        }},
        {"attr":{
            "name":"data-value",
            "value":"0"
        }}
    ]

},{
    "queestion":"gender" ,

    "type":"137",
    "attrs":[
        {"attr":{
            "name":"class",
            "value":"input1"
        }},
        {"attr":{
            "name":"id",
            "value":"input1"
        }},
        {"attr":{
            "name":"data-value",
            "value":"0"
        }}
    ],
    "values":[
        {"value":{
            "title":"famale",
            "value":"0"
        }},
        {"value":{
            "title":"male",
            "value":"1"
        }}
    ]
}]

for (var i = 0; i < schema.length; i++) {
	var type=schema[i].type;
	if(type==128){ 
		var titleinput=schema[i].queestion; 
		var divtitle=document.getElementById('input'); 
	divtitle.innerHTML=titleinput + " : "; 
	var string = "<input "; 
	for (var y=0;y<schema[i].attrs.length;y++){ 
		string += schema[i].attrs[y].attr.name+'="'+schema[i].attrs[y].attr.value+'" ' 
	} 
	string+=">"; 
	console.log(string) 
	var y=document.getElementById('addinput'); 
	y.innerHTML=string; 
}
if(type==137){
var titleinput=schema[i].queestion; 
		var divtitle=document.getElementById('select'); 
	divtitle.innerHTML=titleinput + " : "; 
	var str = "<select><option>gender</option>";
	for (var j = 0; j < schema[i].values.length; j++) {
		str +="<option value='"+schema[i].values[j].value.value+"'>"+schema[i].values[j].value.title+"</option>"
	}
	str +='</select>'
	var x=document.getElementById('option'); x.innerHTML=str;
}
}

＆＃13;

.container{
  display : flex;
  flex-direction: row;
}

＆＃13;

<div class="container">
  <div id="input"></div><div id="addinput"></div>
</div>
<div class="container">
  <div id="select"></div><div id="option"></div>
</div>

＆＃13;

如何通过javascript生成带有json的表单？

2 个答案: