如何使用javascript在html中创建下拉选项

Question

如何在 HTML 中使用 javascript 给出错误 Uncaught SyntaxError: Unexpected token for

var i;
    var html = '<div class="add_more_ticket_div">\
                    <div class="form-group">\
                        <label class="col-sm-2 control-label">Ticket name *</label>\
                        <div class="col-sm-6">\
                        <input type="text" name="ticket_name[]" value="" class="form-control allowOnlyLetter">\
                        <p>Early bird, Standard, V.I.P</p>\
                        </div>\
                    </div>\
                    <div class="form-group">\
                        <label class="col-sm-2 control-label">Description</label>\
                        <div class="col-sm-6">\
                        <input type="text" name="ticket_desc[]" value="" class="form-control allowOnlyLetter">\
                        </div>\
                    </div>\
                    <div class="form-group">\
                        <label class="col-sm-2 control-label">Ticket price *</label>\
                        <div class="col-sm-3">\
                        <input type="text" name="ticket_price[]" value="0.00" class="form-control allowNumDot">\
                        <p>Set zero if ticket is free</p>\
                        </div>\
                    </div>\
                    <div class="form-group">\
                        <label class="col-sm-2 control-label">Ticket quantity *</label>\
                        <div class="col-sm-3">\
                        <input type="text" name="ticket_quantity[]" value="" class="form-control allowOnlyNumber">\
                        </div>\
                    </div>\
                    <div class="form-group">\
                        <label class="col-sm-2 control-label">Max no. of ticket that each user can buy</label>\
                        <div class="col-sm-3">\
                        <select name="ticket_can_buy[]" class="form-control">\
                            '+for (i = 0; i <= 30; i++) {+'<option value="'+i+'">'+i+'</option>'+}+'</select>\
                        </div>\
                        <div class="col-sm-3">\
                        <a href="javascript:void(0)" class="btn bg-orange btn-flat remove-ticket-section">- Remove</a>\
                        </div>\
                    </div>\
                </div>';
    $('.add_more_ticket_div:last').after(html);

如何在 HTML 中使用 javascript 给出错误 Uncaught SyntaxError: Unexpected token for

Answer 1

你不应该混合你的 JavaScript 和你的 HTML。 相反，您可以使用querySelector从 JavaScript 填充您的选择，以获取对您的选择的引用，然后设置其innerHTML属性。

您可以生成您的选项列表，我首先生成一个从 0 到 30 的范围：

Array.from({ length: 30 }, (_,i) => i) // gives [0, 1, 2, 3... 29]

然后你可以映射它以生成一个选项数组：

arr.map(i => `<option value="${i}">${i}</option>`)

然后通过使用join('')连接数组元素来创建一个字符串。

 const selectHTML = Array.from({ length: 30 }, (_,i) => i) .map(i => `<option value="${i}">${i}</option>`).join(''); document.querySelector('#mySelect').innerHTML = selectHTML;

 <div class="add_more_ticket_div"> <div class="form-group"> <label class="col-sm-2 control-label">Ticket name *</label> <div class="col-sm-6"> <input type="text" name="ticket_name[]" value="" class="form-control allowOnlyLetter"> <p>Early bird, Standard, VIP</p> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">Description</label> <div class="col-sm-6"> <input type="text" name="ticket_desc[]" value="" class="form-control allowOnlyLetter"> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">Ticket price *</label> <div class="col-sm-3"> <input type="text" name="ticket_price[]" value="0.00" class="form-control allowNumDot"> <p>Set zero if ticket is free</p> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">Ticket quantity *</label> <div class="col-sm-3">\\ <input type="text" name="ticket_quantity[]" value="" class="form-control allowOnlyNumber"> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">Max no. of ticket that each user can buy</label> <div class="col-sm-3"> <select id="mySelect" name="ticket_can_buy[]" class="form-control"></select> </div> <div class="col-sm-3"> <a href="javascript:void(0)" class="btn bg-orange btn-flat remove-ticket-section">- Remove</a> </div> </div> </div>