jQuery的 - append（）方法无法正常工作，因为空间

Question

我有一个jQuery这样的代码：

$('#dataset_list').append("<option value="+data[i]['fields']['name']+">"+data[i]['fields']['name']+"</option>") 

现在的问题是，如果data[i]['fields']['name']包括内部的空间。
例如data[i]['fields']['name'] = "big city"
它只会将big放在值属性中。

我知道没关系，我只是限制用户不要输入空间。但是有什么方法可以解决问题吗？

Answer 1

将值包裹在引号内，否则空格后的值将作为新属性。

$('#dataset_list').append("<option value='"+data[i]['fields']['name']+"'>"+data[i]['fields']['name']+"</option>") 
//          --^--       --^-- 

---

或者你可以生成DOM element using jQuery再追加使用appendTo()方法。

$('<option/>', { 
    text: data[i]['fields']['name'], 
    value: data[i]['fields']['name'] 
}).appendTo('#dataset_list'); 

Answer 2

我认为，以下将是一个更安全，更简洁的方法（增加了清晰度评论）：

// create an 'option' element on the fly and assign it to variable $opt 
var $opt = $('<option/>'); 

// this goes to value attribute for option 
$opt.val(data[i]['fields']['name']); 

// this is display text for option 
$opt.text(data[i]['fields']['name']); 

// now, append the new element to your #data_list element 
$('#dataset_list').append($opt);