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

Question

how to use javascript in HTML given an error 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);

how to use javascript in HTML given an error Uncaught SyntaxError: Unexpected token for

Answer 1

You should not mix your JavaScript and your HTML. Instead, you can populate your select from your JavaScript using querySelector to get a reference to your select to then set its innerHTML property.

You can generate your list of options my first generating a range from 0 to 30:

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

Then you can map over it to generate an array of options:

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

And then you create a string by joining the array elements with 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>