Question

我需要在使用javascript或jQuery单击HTML按钮时填充下拉列表。如果有，请提示我一些链接。任何帮助/建议将不胜感激！谢谢！

Answer 1

首先在按钮

上绑定click事件的处理程序

("#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>");   
    }     
}

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

使用select标记的appendChild()功能并继续添加选项。您可以在以下网址找到详细信息：http://www.w3schools.com/dom/met_element_appendchild.asp

您也可以使用append()函数在jQuery中执行此操作：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>");
    });

如何在单击HTML按钮时填充下拉列表？

3 个答案: