jquery - 试图附加一个 HTML 选择菜单

Question

我正在尝试通过 jquery 附加一个 HTML 选择菜单，但没有显示任何内容。当我只附加文本框时，这段代码运行良好。当我添加<select>菜单时，它停止工作：

$(document).ready(function(){

$("#add").click(function(){
$("#pTags").append("
<select>
    <option>Volvo</option>
</select>
<input type='text' placeholder='Class #'><br>


");
});
});

JSFIDDLE

Answer 1

这有效：

var htmlString = "<div>This is a string.</div>";

这失败了：

var htmlSTring = "<div>
  This is a string.
</div>";

有时这对于可读性是可取的。

添加反斜杠以使其工作：

var htmlSTring = "<div>\
  This is a string.\
</div>";

或加号

var htmlSTring = "<div>"+
  "This is a string."+
"</div>";

或者您还可以查看其他方式并尝试您最喜欢的方式这里

对于您，请查看此代码段或JSFiddle 示例：

$(document).ready(function(){
  var opts = [
    'Volvo',
    'Ford',
    'BMW'
  ];

  $("#add").on('click', function(){          
    htmlString = "<select>";
    for (var i in opts) htmlString += "<option>"+opts[i]+"</option>";
    htmlString += "</select><input type='text' placeholder='Class #'><br>";

    $("#pTags").append(htmlString);

  });
});​

Answer 2

您不能像这样将字符串拆分为多行，在一行上完成所有操作或添加到字符串中，您会没事的：

$("#pTags").append("<select><option>Volvo</option></select><input type='text' placeholder='Class #'><br>");

小提琴

或者 ：

var html =  '<select>';
    html += '<option>Volvo</option>';
    html += '</select>';
    html += '<input type="text" placeholder="Class #">';
    html += '<br>';
    html.appendTo("#pTags");

小提琴