在表单中动态生成嵌套输入
Posted
技术标签:
【中文标题】在表单中动态生成嵌套输入【英文标题】：Dynamically generate nested inputs in form 【发布时间】：2021-09-06 02:21:29 【问题描述】：我对前端很陌生，所以我很感激任何帮助。 我正在尝试构建一个表单，用户从元素中选择一个选项，然后根据条件动态生成另一个（和其他一些输入）作为子元素。
最后我想要得到的是带有嵌套结构的 JSON。例如
fields: [type: 'List', value: [type: 'Map', value: [type: 'Integer', value: 5, type: 'List', value: [and so on...]]]]
我已经开始用原生 JS 编写代码，这就是我目前所拥有的（下面的 sn-p）。
我想发布与 VUE.js 库 类似的东西（或者也许有人可以告诉我任何其他有用的库），因为我想根据某些条件和其他一些条件来控制我的输入的可见性有用的功能...但我不知道如何将元素动态地推送到嵌套中，等等...我感谢任何帮助、任何想法和任何示例。谢谢！
let template = `
<select name="type" onChange="createChildElement(this)" aria-label="Select type">
<option value="List">Select type</option>
<option value="List">List</option>
<option value="Map">Map</option>
<option value="Integer">Integer</option>
</select>
<select name="method" aria-label="Метод генерации">
<option value="Static">Static</option>
<option value="Random">Random</option>
<option value="Range">Range</option>
</select>
<input name="size" type="text" placeholder="Size">
<input name="value" type="text" placeholder="Value">
`;
function createChildElement(e)
if(e.value == "List")
var x = document.createElement('ul');
var z = document.createElement('li');
z.insertAdjacenthtml( 'beforeend', template );
x.appendChild(z);
e.parentNode.appendChild(x);
if(e.value == "Map")
var x = document.createElement('ul');
var z = document.createElement('li');
z.insertAdjacentHTML( 'beforeend', template );
x.appendChild(z);
var y = document.createElement('ul');
var n = document.createElement('li');
n.insertAdjacentHTML( 'beforeend', template );
y.appendChild(n);
e.parentNode.appendChild(x);
e.parentNode.appendChild(y);
<body>
<div id="main-container">
<ul><li><div class="singleton-card ml-2">
<select name="type" onChange="createChildElement(this)" aria-label="Select type">
<option value="List">Select type</option>
<option value="List">List</option>
<option value="Map">Map</option>
<option value="Integer">Integer</option>
</select>
<select name="method" aria-label="Метод генерации">
<option value="Static">Static</option>
<option value="Random">Random</option>
<option value="Range">Range</option>
</select>
<input name="size" type="text" placeholder="Size">
<input name="value" type="text" placeholder="Value">
</div></li></ul>
</div>
</body>我刚刚找到了这个示例 (https://codesandbox.io/s/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-tree-view?from-embed)，我想构建类似的东西，但是作为一个带有选择和输入的表单（就像我的 sn-p 示例）。
【问题讨论】：
【参考方案1】：如果我理解正确，您正在尝试创建依赖下拉菜单。您可以检查以下代码笔以在 vue.js 中创建依赖下拉列表
https://codepen.io/adnanshussain/pen/KqVxXL
JS
var model_options =
1: [ text: "Accord", id: 1 , text: "Civic", id: 2 ],
2: [ text: "Corolla", id: 3 , text: "Hi Ace", id: 4 ],
3: [ text: "Altima", id: 5 , text: "Zuke", id: 6 ],
4: [ text: "Alto", id: 7 , text: "Swift", id: 8 ]
;
var makes_options = [
text: "Honda", id: 1 ,
text: "Toyota", id: 2 ,
text: "Nissan", id: 3 ,
text: "Suzuki", id: 4
];
var vm_makes = new Vue(
el: "#app",
data:
make: null,
model: null,
makes_options: makes_options,
model_options: model_options,
,
watch:
make: function(event)
$('#vehicle-models').dropdown('clear');
);
$('.ui.dropdown').dropdown();
HTML
<div id="app" class="ui grid">
<div class="row">
<div class="column">
<div class="ui label">Vechicle Make</div>
<select class="ui dropdown" v-model="make" id="vehicle-makes">
<option v-for="option in makes_options" v-bind:value="option.id">
option.text
</option>
</select>
</div>
</div>
<div class="row">
<div class="column">
<div class="ui label">Vechicle Model</div>
<select class="ui dropdown" id="vehicle-models" v-model="model">
<option
v-for="option in model_options[make]"
:value="option.id"
:key="option.id"
>
option.text
</option>
</select>
</div>
</div>
</div>
【讨论】：
不，这不是我想要做的:(我想根据用户的选择条件生成子（嵌套）元素。然后在生成的元素中，用户可以再次选择选项将在第一个生成的元素中生成一个新的子（嵌套）元素。依此类推...以上是关于在表单中动态生成嵌套输入的主要内容，如果未能解决你的问题，请参考以下文章
仅使用纯javascript在单击按钮时动态生成表单输入字段递增和递减