2012-08-04 84 views
0

我想通過jquery附加HTML選擇菜單,但沒有顯示出來。當我只附加文本框時,此代碼運行良好。當我加入<select>菜單,它停止工作:嘗試添加HTML選擇菜單

$(document).ready(function(){ 

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


"); 
}); 
}); 

JSFIDDLE

+0

您可以張貼在的jsfiddle?包括HTML – Samson 2012-08-04 13:38:41

+0

@radashk查看我編輯的問題 – user176105 2012-08-04 13:41:22

回答

2

這工作:

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

    }); 
});​ 
+0

我試了反斜槓,它沒有工作。看看我更新的jsfiddle – user176105 2012-08-04 13:44:34

+0

再次看到我的答案,我更新了你:) – 2012-08-04 13:55:59

+0

我明白,但有一些方面我可以寫這沒有斜線。最終,這個選擇菜單將包含大約50個選項 – user176105 2012-08-04 14:08:15

0

不能拆分成幾行這樣的字符串,做這一切在同一行或添加到字符串,你會被罰款:

$("#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

+0

這是Mozilla推薦的內容,但我喜歡反斜槓:P – 2012-08-04 14:01:04

+0

有沒有更好的方法來完成這一切?像我可以只用空格寫我的HTML? – user176105 2012-08-04 14:06:34