<input></input> in innerHTML not working

我用javascript創建了一個下拉列表，我填充它從MySQL數據庫獲取數據。<input></input> in innerHTML not working

我的問題是我無法將下拉列表放在innerHTML代碼中。

這是我寫的創建與JS的下拉列表：

var mySpan = document.getElementById('myDiv'); 

var myLine = document.getElementById('testcat'); 
myLine.value++; 

// Create select 
var selection = document.createElement('select'); 
selection.setAttribute('name',"category[]"); 
mySpan.appendChild(selection); 

// Create Option 
createSelectOption(selection); 

// Create the container 
var ni = document.getElementById('myDiv'); 
ni.setAttribute('style', 'width:790px;'); 
........... 
...........

然後，我創建其他的事情，並創建HTML代碼，我用：

newdiv.innerHTML = '<div class="table">.........</div>'; 
ni.appendChild(newdiv);

這是部分的HTML：

// test dropdown list 
<input name="testcat" id="testcat" type="hidden" value="0" /> 
<div id="myDiv"></div>

我測試了我的下拉列表，你可以在上面的代碼中看到，它的工作原理如果我聲明<input name="testcat" id="testcat" type="hidden" value="0" />在HTML中（我的意思是在<body></body>），但如果我在innerHTML中使用相同的代碼，FireBug告訴我：「myLine爲null; myLine.value ++;？」

任何幫助

來源

2012-06-21 Mark

你的HTML中是否有任何斷線？另外，使用'innerHTML'使用'document.createElement'和'appendChild'方法插入HTML是非常糟糕的想法。 – antyrat

你是在**頁面完成加載後執行它們嗎？如果沒有，它會失敗 –

你試過它作爲自閉標籤嗎？'（注意尖括號前的斜槓）？ –

不能使用innerHTML的文本分配一個ID的元素 - ID不會對DOM註冊您需要先創建元素，分配給它的ID，然後把該元素在DOM

您可能會發現這更容易使用jQuery：

var input = document.createElement("input"); 
input.id="testcat"; 
input.innerHTML = "testcat" ; 
$('somediv').appendChild(input);

來源

2012-06-21 11:17:12 Robbie

這是我在我的舊代碼所做的：

var selectcat = document.createElement("select"); 
selectcat.name = "category[]"; 
selectcat.options[0] = new Option("",""); 
selectcat.options[1] = new Option("cat1","cat1"); 
selectcat.options[2] = new Option("cat2","cat2"); 
.......... 
.......... 
selectcat.options[12] = new Option("cat1","cat12");

而且使用：

newdiv.innerHTML = '<div class="table"><ul><li><select name="category[]"><option value=""></option><option value="cat1">cat1</option><option value="cat2">cat2</option></select></li></ul></div>';

但現在我不得不從MySQL數據庫中獲取值。

所以我創造了這個功能：

function createSelectOption(element) 
    { 
     var objSelect = ele; 
     var Item = new Option("", ""); 
     objSelect.options[objSelect.length] = Item; 
     <? 
     while($categ = mysql_fetch_array($resultf_categ)) 
     { 
     ?> 
      var Item = new Option("<?=$categ["cat_name"];?>", "<?=$categ["cat_name"];?>"); 
      objSelect.options[objSelect.length] = Item; 
     <? 
     } 
     ?> 
    }

但還是不明白怎麼才能在我的innerHTML直接使用。對不起，這些愚蠢的問題，但我真的很困擾這裏。

來源

2012-06-21 12:00:26 Mark

好吧，我重寫了整個代碼，刪除了innerHTML，現在我排序了。給我一些時間來清理代碼，我會發布我的解決方案。謝謝大家的提示，特別是antyrat和羅比，謝謝。 – Mark

按照提示，我重寫了函數，刪除了innerHTML，並創建了所有輸入字段和下拉列表，如下所示： '//創建輸入文本（圖像的名稱） var namePic = document.createElement（'input' ）; namePic.setAttribute（'type'，「text」）; namePic.setAttribute（'name'，「name []」）; namePic.setAttribute（'id'，「img_name」+ myLine.value）; mySpan.appendChild（namePic）; \t //創建select（DropDown List - Category） var cat = document.createElement（'select'）; cat.setAttribute（'name'，「category []」）; cat.setAttribute（'id'，「category」+ myLine.value）; mySpan.appendChild（cat）;' – Mark

<input></input> in innerHTML not working

回答

相關問題