JQuery的.append忽略

我有以下HTML：JQuery的.append忽略

<div id='show-label'> 
    <select id="comboboxShowLabel"> 
    <option value="">Hide or show labels?</option> 
    <option value="Show Labels">Show Label</option> 
    <option value="Hide Labels">Hide Label</option> 
    </select> 
</div>

我想給的<select></select>在運行時添加到父DIV，鼻翼：

 <div id='show-label'> 
    </div> 

    $("#show-label").html("<select id='comboboxShowLabel'>") 
     .append("<option value=''>Hide or show labels?</option>") 
     .append("<option value='Show Labels'>Show Label</option>") 
     .append("<option value='Hide Labels'>Hide Label</option>") 
     .append("</select>");

對於resons未知對我來說，結束標記沒有被注入頁面。

我試過上面的代碼，以及這樣的事情：

.append("<option value='Hide Labels'>Hide Label</option></select>")

有沒有解決「配料」這些元素某種需求爲單一.append？我想知道如果這種方法在加載到DOM中時看起來不是很好，所以它被忽略了...

謝謝！

來源

2013-08-19 Russell Christopher

你***不能***將不完整的元素附加到DOM。擺脫所有的追加，並在一次掃描行動。 –

是的，那是有效的。試圖變得太花哨。 –

試試這個：

$("#show-label").append(function() { 
    return $("<select id='comboboxShowLabel'>") 
     .append("<option value=''>Hide or show labels?</option>") 
     .append("<option value='Show Labels'>Show Label</option>") 
     .append("<option value='Hide Labels'>Hide Label</option>"); 
});

來源

2013-08-19 20:54:56 tomaroo

你可以簡單地追加完成選擇，然後添加選項到它：

$("#show-label").html("<select id='comboboxShowLabel'></select"); 
$("#comboboxShowLabel") 
    .append("<option value=''>Hide or show labels?</option>") 
    .append("<option value='Show Labels'>Show Label</option>") 
    .append("<option value='Hide Labels'>Hide Label</option>");

來源

2013-08-19 20:53:19

append()只追加一個元素的其他元素。你需要做的是製作一個有效的選擇標籤。然後您可以將選項附加到該選項。請參閱the documentation。

$("#show-label").html("<select id='comboboxShowLabel'></select>") 
$('#show-label select').append("<option value=''>Hide or show labels?</option>") 
    .append("<option value='Show Labels'>Show Label</option>") 
    .append("<option value='Hide Labels'>Hide Label</option>");

來源

2013-08-19 20:53:21 Sumurai8

而是執行此操作：

var $select = $("<select id='comboboxShowLabel'></select>"); 
$("#show-label").html($select); 
$select.append("<option value=''>Hide or show labels?</option>") 
    .append("<option value='Show Labels'>Show Label</option>") 
    .append("<option value='Hide Labels'>Hide Label</option>");

如果需要追加以後無論出於何種原因。否則，做更好的瀏覽器效率（一個換向實際的DOM而不是多個）這樣說：

var $select = $("<select id='comboboxShowLabel'></select>") 
    .append("<option value=''>Hide or show labels?</option>") 
    .append("<option value='Show Labels'>Show Label</option>") 
    .append("<option value='Hide Labels'>Hide Label</option>"); 
$("#show-label").html($select);

來源

2013-08-19 20:53:38 smerny

在將選擇附加到標籤之前，將選項附加到選擇會更有效。 –

@KevinB，我打算這樣做，但我認爲可能是附加程序之間的東西或OP的實際實現中的東西...我現在已經建立了兩種方法。 – smerny

這條線：

$("#show-label").html("<select id='comboboxShowLabel'>")

設置html的#show-label，並返回一個代表#show-label的jQuery對象。第二部分是重要的存在，因爲這意味着你的下一行，

.append("<option value=''>Hide or show labels?</option>")

也被附加到#show-label，這是不是你想要的。試試這個：

$("#show-label").empty().append(
    $('<select/>') 
     .append("<option value=''>Hide or show labels?</option>") 
     .append("<option value='Show Labels'>Show Label</option>") 
     .append("<option value='Hide Labels'>Hide Label</option>") 
);

來源

2013-08-19 20:56:04

JQuery的.append忽略

回答

相關問題