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