Question

如何在HTML中使用JavaScript 给了一个错误Uncaught SyntaxError：意外的令牌

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：意外的令牌

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, 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 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>

如何使用JavaScript在HTML中创建下拉菜单选项

1 个答案: