我正在尝试<select><option...</select>在jQuery中创建一个select（）对象。
我试过了，但是不会添加选项值和文本：
var photos = [
'_DSC0153.jpg',
'_DSC0154.jpg'
];
var dropdown = $("<select>", {
id: 'selectfile'
, option: { value: '0', text: photos[0] }
, option: { value: '1', text: photos[1] }
});
dropdown.appendTo( $('#gallery') );
这个其他版本（动态）甚至不会显示select元素：
var photos = [
'_DSC0153.jpg',
'_DSC0154.jpg'
];
var dropdown = $("<select>", {
id: 'selectfile',
for (i = 0; i < files.length; i++) {
option: { value: i, text: photos[i] }
}
});
dropdown.appendTo( $('#gallery') );
我建议以下内容：
var photos = [
'_DSC0153.jpg',
'_DSC0154.jpg'
];
// creating the <select> element:
$('<select>', {
// setting its 'id' property/attribute:
'id' : 'selectfile'
// in order to append nodes (rather than a string of HTML),
// we use the append() method:
}).append(function () {
// using Array.prototype.map() to iterate
// over the given (photos) array, creating a
// a new array. Using the anonymous function's
// arguments (el: the array-element itself,
// i: the index of the array-element) to
// create new <option> elements using the
// new Option() Constructor; setting
// its text (to the filename, el) and
// value (to the index, i):
return photos.map(function(el,i){
return new Option(el, i);
});
// appending the <select> to the <body>:
}).appendTo('body');
var photos = [
'_DSC0153.jpg',
'_DSC0154.jpg'
];
$('<select>', {
'id': 'selectfile'
}).append(function() {
return photos.map(function(el, i) {
return new Option(el, i);
});
}).appendTo('body');<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>外部JS Fiddle演示，用于实验。
但是，如果您希望在<select>-creation阶段设置HTML字符串，则完全有可能：
var photos = [
'_DSC0153.jpg',
'_DSC0154.jpg'
];
$('<select>', {
'id': 'selectfile',
// using Array.prototype.map() again,
// iterating over the photos array, creating
// a new array:
'html': photos.map(function(el, i) {
// creating new <option> elements (as above)
// setting text and values (as before); but
// but this time we return the 'outerHTML'
// property of the created <option> element,
// creating an array of HTML:
return new Option(el, i).outerHTML;
// joining the array of HTML together with empty strings:
}).join('')
}).appendTo('body');
var photos = [
'_DSC0153.jpg',
'_DSC0154.jpg'
];
$('<select>', {
'id': 'selectfile',
'html': photos.map(function(el, i) {
return new Option(el, i).outerHTML;
}).join('')
}).appendTo('body');<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>外部JS Fiddle演示，用于实验。
在上面的代码中，join('')不必使用JS Fiddle demo（JS Fiddle演示），但是出于个人喜好和习惯的考虑，我倾向于使用它。
参考：
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句