Tengo una lista de selección que obtiene elementos de la base de datos donde podemos agregarle otros elementos de otra lista o eliminar elementos en ella,
<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>Y justo después de la lista de selección, tengo un div con varios campos de texto para insertar en la base de datos, quiero mostrar varios números de este mismo div de forma sincrónica de acuerdo con los elementos de la selección, si la lista tiene esencialmente 2 veces, tendremos esto div se muestra dos veces, si agregamos otro elemento a la lista, se convertirá en 3 veces y tengo problemas para hacer esto
El truco estará en nombrar elementos, pero jquery .each() debería ayudarlo a comenzar:
$("#IX option").each(function () { $("body").append($("#fieldsDiv").html()); });Recomendaría usar una plantilla de contenido y construir dinámicamente los nuevos divs basados en ella:
<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>