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>";

或者您可以看到其他方式并尝试最喜欢的方式HERE

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

$(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>");

FIDDLE

或：

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

FIDDLE

尝试附加HTML选择菜单

2 个答案: