jQueryの - 追加（）メソッドは、スペース

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のみをvalue属性に入れます。

私は、入力のためのスペースを入れないようにユーザーを制限するだけで大​​丈夫です。しかし、問題を解決できる方法はありますか？

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