Question

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

ajax调用正在工作。问题是当我尝试创建包含html的变量时。我不知道在变量内迭代并创建多个option的方法。

这是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 String模板

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

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

Answer 2

在ajax调用中，您可以创建一个字符串变量，并使用您想要设置的任何循环（for循环），然后在html中所需位置的ajax调用中使用该变量。

var myOptionsValues = ['cat', 'dog', 'fish'];
var myOptionsHtml = '';
myOptions.forEach(function (optionValue) {
    myOptionsHtml+='<option value="' + optionValue + '">' + optionValue + '</option>';
});

var myHtmlForAjax = '<select>' + myOptions + '</select>';

Answer 3

是的。只需将其添加到DOM元素中，然后使用.children以Array形式获取它即可：

/* a string with HTML text */
const someString = `
    <p>Paragraph1</p>
    <p>Paragraph2</p>
    <p>Paragraph3</p>
`;

/* create a temporary element */
const temp = document.createElement("div");

/* add the HTML text to that element */
temp.innerHTML = someString;

/* create the array */
const array = Array.from(temp.children);

/* loop */
for(let i = 0; i < array.length; i++){
    const p = array[i];
    alert(p); // or do whatever
}

有没有一种方法可以循环包含html的变量内

3 个答案: