添加選項以進行選擇不起作用

我想添加一個選項以使用下面的代碼進行選擇。但是在實際頁面上沒有任何變化。添加選項以進行選擇不起作用

var x = document.getElementById("UserField"); 
var option = document.createElement("option"); 
option.text = "Kiwi"; 
x.add(option); 
console.log(document.getElementById("UserField"));

從我得到的console.log是什麼：

<select id="UserField" class="jqTransformHidden"> 
    <option value="">(choose one)</option> 
    <option value="0">1</option> 
    <option value="1">2</option> 
    <option value="2">3</option> 
    <option value="3">4</option> 
    <option value="4">5</option> 
    <option>Kiwi</option> 
</select>

所以日誌包含奇異果，但是當我打開網頁它不存在。什麼可能是錯的？

來源

2016-11-14 user2817869

嘗試'x.appendChild（option）;'。 https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement – nurdyguy

你的代碼工作正常。它添加只是將你的代碼包裝在window.onload – Geeky

似乎工作正常。 https://jsfiddle.net/obbfLfpk/ – isherwood

-2

嘗試刪除JavaScript並查看它是否有效。如果這樣做，可能意味着你的JavaScript代碼有一些錯誤，但對於HTML代碼，我實在看不出它

來源

2016-11-14 22:15:31

不是一個真正的答案。 –

任何錯誤從https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild：

的Node.appendChild（）方法添加一個節點到指定父節點的子列表的末尾。如果給定的孩子是對文檔中現有節點的引用，則appendChild（）將其從其當前位置的移動到新位置（沒有要求在將節點附加到其他節點之前從其父節點移除節點節點）。

如果你想追加東西給任何DOM元素，在父元素上使用appendChild(theChild)。正如邁克布蘭特指出add(item, before)應該也可以。（參考文獻：https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/add）

答：

確保您的腳本執行後當DOM就緒（onload事件或DOMContentLoaded）。

從https://developer.mozilla.org/de/docs/Web/API/GlobalEventHandlers/onload：

在原稿載置過程結束

負載事件觸發。在這一點上，文檔中的所有對象都在DOM中，並且所有圖像，腳本，鏈接和子幀都已完成加載。

function load() { 
    // execute your code here 
} 
window.addEventListener("load", load);

您可以檢查此的jsfiddle：https://jsfiddle.net/pfc7fhkm/3/

來源

2016-11-14 22:16:06

它的工作正常，由OP發佈。爲什麼這種改變是必要的？ – isherwood

我不知道節點的標準'添加'方法。我只知道這裏指定的appendChild https://developer.mozilla.org/en-US/docs/Web/API/Node –

我會同意使用appendChild（）對其他代碼更統一，而不是特定的'add（）'方法，它只適用於通過'HTMLSelectElement'接口選擇元素。 'add（）'確實有額外的功能，如果使用的話，可能是給予'add（）'優先的理由。 –

window.onload = function() { 
 
    var x = document.getElementById("UserField"); 
 
    var option = document.createElement("option"); 
 
    option.text = "Kiwi"; 
 
    x.add(option); 
 
    console.log(document.getElementById("UserField")); 
 
}

<select id="UserField" class="jqTransformHidden"> 
 
    <option value="">(choose one)</option> 
 
    <option value="0">1</option> 
 
    <option value="1">2</option> 
 
    <option value="2">3</option> 
 
    <option value="3">4</option> 
 
    <option value="4">5</option> 
 

 
</select>

希望它可以幫助

來源

2016-11-14 22:17:27 Geeky

標識使之成爲一個功能，但你可以用一個jQuery做點擊以及

如果它連接到一個按鈕的onclick功能這將工作：

<script> 
var mydropdown = $('#UserField'); 
function add(){ 
    mydropdown.append("<option>"+$(this).val()+"</option>"); 
} 
</script>

這會爲工作的點擊以及

<script> 
var mydropdown = $('#UserField'); 
var mybtn = $('#buttonId'); 
mybtn.click(function(){ 
    mydropdown.append("<option>+$(this).val()+"</option>"); 
}); 
</script>

來源

2016-11-14 22:23:19

作品對我來說，當我將這個腳本放在HEAD部分。奇異鳥出現了。你在哪裏放置你的Java腳本？我包括完整的代碼。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
    <title>Untitled Page</title> 
     <script type="text/javascript"> 
      var x = document.getElementById("UserField"); 
      var option = document.createElement("option"); 
      option.text = "Kiwi"; 
      x.add(option); 
    </script> 
</head> 
<body> 
    <select id="UserField" class="jqTransformHidden"> 
    <option value="">(choose one)</option> 
    <option value="0">1</option> 
    <option value="1">2</option> 
    <option value="2">3</option> 
    <option value="3">4</option> 
    <option value="4">5</option> 
    <option>Kiwi</option> 
</select> 
</body> 
</html>

來源

2016-11-14 22:26:08

添加選項以進行選擇不起作用

回答

相關問題