從Javascript輸出HTML表單元素

我剛剛開始使用JavaScript，所以這可能聽起來像一個菜鳥問題。我想打印出一個選擇表單元素。但我在我的代碼的JavaScript部分執行它，因爲必須從腳本中的數組訪問選項列表。我在HTML部分使用了div元素來輸出這個select元素。我的代碼如下。從Javascript輸出HTML表單元素

<head> 
<script> 

    function currentWorlds() 
    { 
     var string="<select id='worldSelected'>"; 
     for(var i=0;i<universe.name.length;i++) 
     { 
      string+="<option value='"+i+"'>"+universe.name[i]+"</option>"; 
     } 
     string+="</select>"; 

     $('#universeOptions').html(string); 

    } 

    $(function(){ 
    currentWorlds(); 
    }); 


</script> 
</head> 

<body> 
<form>   
Select from current games: <br>   
<div id="universeOptions"></div> 
<input type="button" id="selectWorldButton" name="selectWorld" value="Select Game"> </br> 

</form> 
</body>

我只包括了我似乎遇到問題的相關代碼。在這種情況下，universe是一個名爲name的數組屬性的對象。這些名稱是我想顯示的選項，並基於用戶的輸入，想要處理。我選擇它後似乎不能保存選擇選項的ID。這意味着當我console.log的worldSelected的值，它輸出一次0。選擇新選項後不輸出任何內容。有什麼我失蹤？幫助將不勝感激！

謝謝！

來源

2014-04-19 Saima

你可以添加代碼，你登錄選定的世界？而0可能是你選擇第一個元素的結果。你的第一個元素的id是0.因爲我從循環中的0開始 – Ritikesh

在我調用currentWorlds（）函數之後，它在主javascript函數中。 ' console.log（「World selected is」）; \t \t \t \t console.log（document.getElementById（「worldSelected」）。selectedIndex）; ' – Saima

檢查我剛剛發佈的答案。 – Ritikesh

我可以編輯代碼有點...試試這個，讓我知道，如果它的工作原理：

Fiddle test here

查看控制檯日誌上JsBin

function currentWorlds(){ 
    var universe = { 
     name: ["Uni A","Uni B","Uni C","Uni D","Uni E","Uni F","Uni G"] 
    }; 
    var select = "<select id='worldSelected'></select>"; 
    $('#universeOptions').html(select); 
    for(var i=0;i<universe.name.length;i++){ 
     $('#worldSelected').append($("<option></option>") 
          .attr("value",i) 
          .text(universe.name[i])); 
    } 
} 

$(function(){ 
    currentWorlds(); 
    $('#worldSelected').change(function(){ 
     console.log($(this).val()); 
    }); 
});

來源

2014-04-19 10:14:17 TriniBoy

它似乎沒有註銷任何東西。 – Saima

@Saima - 抱歉更新了Jsbin鏈接 - http://jsbin.com/fikusalu/1/edit?html,js,console,output – TriniBoy

是的！有用！感謝您的幫助。另外作爲一個說明，您使用的.append，.attr和.text方法是用來操作ID嗎？他們到底做了什麼？ – Saima

此代碼使用jquery檢查選定的值。

$('#worldSelected').change(function(){ 
    console.log($(this).val()); 
});

這會在每次選擇新值時記錄選擇框的值。你也可以在你的currentWorlds函數定義上面添加這段代碼。注意：這需要你添加jQuery庫。正如我從你發佈的代碼中已經注意到的，你已經使用了jquery。所以我假設你已經將它鏈接到你的文件中。

來源

2014-04-19 10:03:36 Ritikesh

我在代碼中添加了它，並沒有記錄任何東西。看起來，worldSelected ID沒有根據我選擇的選項爲其分配任何值。 – Saima

您可以右鍵單擊選擇框並單擊檢查元素。在開發人員工具中，您可以找到頁面的原始html代碼。檢查選項和選擇框是否已從那裏分配ID。 – Ritikesh

爲了澄清，通過使用div將select元素作爲字符串輸出，它會像HTML表單元素一樣正常工作嗎？或者我必須以其他方式操縱它，以便它能接受用戶的輸入？ – Saima

您可以直接使用此在你的代碼：

function currentWorlds() 
    { 
     var string = document.createElement('select'); 
     string.setAttribute('id', 'worldSelected'); 
     var string1; 

     for(var i=0;i<universe.name.length;i++) 
     { 
      string1 = document.createElement('option'); 
      string1.value = i; 
      string1.text = universe.name[i]; 
      string.appendChild(string1); 
     } 

     document.getElementById('universeOptions').appendChild(string); 

    }

來源

2014-04-19 10:40:57

從Javascript輸出HTML表單元素

回答

相關問題