如何使用jQuery动态创建下拉列表?

时间:2022-02-24 09:47:43

How do you create a dropdown list dynamically using jQuery? By dropdown list, I mean a <select> with its associated <option> values.

如何使用jQuery动态创建下拉列表?通过下拉列表,我的意思是

3 个解决方案

#1


67  

Just create the elements like any element.

只需像任何元素一样创建元素。

Example:

例:

var data = {
    'foo': 'bar',
    'foo2': 'baz'
}


var s = $('<select />');

for(var val in data) {
    $('<option />', {value: val, text: data[val]}).appendTo(s);
}

s.appendTo('body'); // or wherever it should be

#2


7  

In its simplest form,

最简单的形式,

var opt = "<option> -- Select -- </option>";

$(opt).wrap('<select />');

$('#some-container-div').html(opt);

#3


3  

http://hungred.com/how-to/tutorial-jquery-select-box-manipulation-plugin/

http://hungred.com/how-to/tutorial-jquery-select-box-manipulation-plugin/

#1


67  

Just create the elements like any element.

只需像任何元素一样创建元素。

Example:

例:

var data = {
    'foo': 'bar',
    'foo2': 'baz'
}


var s = $('<select />');

for(var val in data) {
    $('<option />', {value: val, text: data[val]}).appendTo(s);
}

s.appendTo('body'); // or wherever it should be

#2


7  

In its simplest form,

最简单的形式,

var opt = "<option> -- Select -- </option>";

$(opt).wrap('<select />');

$('#some-container-div').html(opt);

#3


3  

http://hungred.com/how-to/tutorial-jquery-select-box-manipulation-plugin/

http://hungred.com/how-to/tutorial-jquery-select-box-manipulation-plugin/