Question

I am trying to appended an HTML select menu via jquery, but nothing shows up. This code ran fine when I only appended the textbox. When I added the <select> menu, it stopped working:

$(document).ready(function(){

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


");
});
});

JSFIDDLE

Answer 1

This works:

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

This fails:

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

Sometimes this is desirable for readability.

Add backslashes to get it to work:

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

Or plus sign

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

or furthermore you can see other ways and try the one that you liked most HERE

For you, checkout this snippet or 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);

  });
});​