如何在單擊HTML按鈕時填充下拉列表？

Question

我需要使用javascript或jQuery來點擊HTML按鈕來填充下拉列表。如果有，請給我建議一些鏈接。 任何幫助/建議將不勝感激！謝謝 ！

Answer 1

使用select標籤的appendChild()函數並繼續添加選項。你可以找到詳細信息：http://www.w3schools.com/dom/met_element_appendchild.asp

你也可以做到這一點在jQuery的使用append()功能：http://api.jquery.com/append/

你可以看看工作代碼爲：http://jsfiddle.net/shubhanshumishra/jHFZZ/

<input id="clickMe" value="clickme" type="button" /> 
<select id="dropdown"> 
    <option value="0">Select Fields</option> 
</select> 

這是Javascript：

$i=0; 
$("#clickMe").click(function(e){ 
    $i++; 
    $("#dropdown").append("<option value='"+$i+"'>New Field</option>"); 
    });​ 

Answer 2

它應該是相當簡單的。

你只需要有一個onclick事件或使用按鈕的事件綁定來調用一個將填充下拉的函數。

E.g. <button type='button' onclick='Populate();'>Populate</button>

然後你的JavaScript函數只是增加中的值：

function Populate() { 

    var dropdown = document.getElementById("dropdown_id_here"); 

    dropdown.options[0] = new Option('Text 1', 'Value1'); 
    dropdown.options[1] = new Option('Text 2', 'Value2'); 

    // And so on, add as many options as required. 
} 

毫無疑問，有幾十個方法來實現這一功能，這樣其他的解決方案可能更適合你或者更簡單。

Answer 3

首先綁定按鈕點擊事件處理程序

("#myBtnId").click(function(){ 
    populateDropDown(); 
}); 

然後使該填充下拉

function populateDropdown(){ 
    var $myDD = $("#myDropDownId"); 
    $myDD.append("<option value='value'>Text</option>"); 
} 

通知的功能，如果你有一個項目列表你只需要改變的代碼迭代列表併爲這些選項設置值和文本。

function populateDropdown(listOfItems){ 
    var $myDD = $("#myDropDownId"); 
    for (var i = 0; i<listOfItems.lenght; i++){ 
     $myDD.append("<option value='"+ listOfItems[i].value +"'>"+listOfItems[i].text+"</option>"); 
    }  
}