javascript - 有没有办法在包含 html 的变量内循环

Question

我正在尝试设置一个select按钮，该按钮从ajax调用中获取options。

ajax 调用正在运行。问题是当我尝试创建包含 html 的变量时。我不知道如何在变量内迭代和创建多个选项。

这是 ajax 调用:

$.ajax({
        url: '/facturas/data',
        type: 'GET',
        success: function(s) {
            var currency = s.currency;
            var rendiciones = s.rendiciones;
            var tipo_comprobante = s.tipo_comprobante;
            var tipo_gasto = s.tipo_gasto;
            var fm_table_row =  '<td>'+
                                    '<div class="inputfield"><select name="fm_tipo_comp_select"><option value="" disabled="" selected="">Comprobante</option>'+
                                    tipo_comprobante.forEach(row){
                                        '<option value="id">nombre</option>'+
                                    }
                                    '</select><label>Tipo comprobante</label></div>'+
                                '</td>'+
                                '<td>'+
                                    '<div class="inputfield"><select name="fm_tipo_gasto"><option value="" disabled="" selected="">Tipo gasto</option>'+
                                    '<option value="id">nombre </option>'+
                                    '</select><label>Tipo gasto</label></div>'+
                                '</td>'+
                                '<td>'+
                                    '<div class="inputfield"><input class="validate right-align" id="fm_serie" type="text" name="fm_serie" /></div>'+
                                '</td>'+
                                '<td>'+
                                    '<div class="inputfield"><input class="validate right-align" id="fm_ndoc" type="text" name="fm_ndoc" /></div>'+
                                '</td>'+
                                '<td>'+
                                    '<div class="inputfield"><input class="validate right-align" id="fm_ruc" type="text" name="fm_ruc" /></div>'+
                                '</td>'+
                                '<td>'+
                                    '<div class="inputfield"><input class="validate right-align" id="fm_rs" type="text" name="fm_rs" disabled="disabled" /></div>'+
                                '</td>'+
                                '<td>'+
                                    '<div class="inputfield"><input class="datepicker validate" id="fm_fecha" type="text" name="fm_fecha" /></div>'+
                                '</td>'+
                                '<td>'+
                                    '<div class="inputfield"><select name="fm_moneda"><option value="" disabled="" selected="">Moneda</option>'+
                                    '<option value="id">nombre </option>'+
                                    '</select><label>Moneda</label></div>'+
                                '</td>'+
                                '<td>'+
                                    '<div class="inputfield"><input class="validate" id="fm_monto" type="number" /></div>'+
                                '</td>'+
                                '<td>'+
                                    '<div class="inputfield"><select name="fm_retencion"><option value="" disabled="" selected="">Retención</option>'+
                                    '<option value="id">nombre </option>'+
                                    '</select><label>Retención</label></div>'+
                                '</td>'+
                                '<td>'+
                                    '<div class="inputfield"><a class="btn-floating btn-small waves-effect waves-light red delete-btn"><i class="material-icons">delete</i></a></div>'+
                                '</td>';
        }
      });

我添加了 tipo_comprobante.forEach(row){} 来显示我想要执行的操作。

Answer 1

使用reduce和ES6字符串模板

var options = ['cat', 'dog', 'fish'].reduce((acc, value) => 
  acc + `<option value="${value}">${value}</option>`, '');

var result = `<select>${options}</select>`;