根据 select 列表中的元素数显示多个 div 同步实例

Question

我有一个 select 列表，它从数据库中获取项目，我们可以从其他列表中添加其他项目或删除其中的项目，

 <div class="form-group col-md-3">
 <label for="IX">Selected Issuing Banks</label>     
<select id="IX" name="IX" multiple="multiple" style="width: 250px; height: 70px; margin: 0px 2px 0px 3px;" data-bind="options: IX, optionsText: function(item) { return item.Name +' (' + item.BICCode + ')' }, optionsValue: 'Id',value: IdIX"></select>
</div>

就在选择列表之后，我有一个包含多个文本字段的 div 要插入到数据库中，我想根据 select 中的项目同步显示同一个 div 的多个数字，如果列表基本上有 2 次，我们将拥有这个div 显示两次，如果我们将另一个项目添加到列表中，它将变为 3 次，我无法做到这一点

Answer 1

诀窍在于命名元素，但 jquery .each()应该让你开始：

$("#IX option").each(function () {
    $("body").append($("#fieldsDiv").html());
});

我建议使用内容模板并基于它动态构建新的 div：

<div class="divContainer">
</div>

<template id="fieldsDivTemplate">
    <div class="fields">
        <!-- your fields go here use {{tags}} as placeholders for id values -->
    </div>
</template>

<script>
    $(function () {
        let t = $("#fieldsDivTemplate").html();
        t = t.replace(/{{tags}}/g, "value from select list item goes here");

        body.append(t);
    });
</script>