2016-05-11 154 views
-4

我一直在嘗試通過javascript從「選擇」元素中檢索選定的值。我甚至無法使用jQuery或document.getElementById()從DOM獲取元素。 這裏是我的代碼:無法通過ID獲取HTML元素

function getDropdown(headerText, options, id) { 
     var container = document.createElement('div'); 
     container.setAttribute('class', 'nfvo-drop-down-container'); 

     var dd = document.createElement('select'); 
     $(dd).attr('id', id); 
     for(var val in options) { 
      $('<option />', {value: val, text: options[val]}).appendTo(dd); 
     } 

     if(headerText) { 
      var span = document.createElement('span'); 
      span.setAttribute('class', 'panel-header'); 
      span.appendChild(document.createTextNode(headerText)); 
      container.appendChild(span); 
     } 

     container.appendChild(dd); 
     return container; 
    } 
    var dd = getDropDown('My dropdown', [1,2,3,4], 'ddID); 
    var e = document.getElementById('ddID'); 
    var e2 = $('#ddID'); 
    var e3 = $('#ddID').val(); 
    var e4 = $('#ddID').text(); 

如果我CONSOLE.LOG這些價值,我會得到這些結果:上什麼可能導致此問題

console.log(e) -> 'null' 
console.log(e2) -> <Got the element> 
console.log(e3) -> 'undefined' 
console.log(e4) -> <Nothing, just a blank> 

任何的IDE? 此的碼塊是「然後」函數調用e.g內:

$.when(...).then(function(...) 
    <Here is the code> 
); 

編輯:有其中現在已經固定後一個錯字。這不是我的問題的根源。

我還應該提到,我通過Dojo工具包將此div添加到ContentPane,並且我可以通過chrome中的檢查工具在DOM中看到下拉列表。

+5

有一個代碼行上的錯誤var e = document.getElemetnById('ddID');: 其'getElementById' –

+3

請使用控制檯進行調試。 –

+1

除此之外,你有一個語法錯誤,並提到'getElemetnById'中的拼寫錯誤:爲什麼你確定'console.log(e2)'顯示你的元素?即使沒有找到元素,'$('#ddID')'的結果也不會是'null'或'undefined',因爲$(...)返回一個包含零個或多個元素的結果集。如果'document.getElementById('ddID');'爲'null',那麼'$('#ddID')。length'將爲'0'。 –

回答

3

你不會使用的document.getElementById獲取選擇框對象(「ddID」) 因爲你沒有添加你的對象以文件 任何對象,您將使用dd.childNodes得到DD對象選擇框對象[1]

0

getDropDown使用該ID創建一個元素,將其放入div中,然後返回div。

它從不將任何元素添加到document中的任何元素。

因此,當您在文檔中搜索具有匹配id的元素時,它不在那裏。

+0

我在此項目中使用Dojo並將div附加到ContentPane。這很重要嗎?我認爲dojo將它添加到DOM,因爲我可以在Chrome中使用檢查工具查看下拉元素。 – Edvin

+0

@Edvin - 您提供的代碼根本不會將其添加到文檔中。也許你沒有向我們展示過的代碼添加太晚了。 – Quentin