使用 jQuery 创建一个新的选择下拉对象答案

【问题标题】：Create a new select dropdown object with jQuery使用 jQuery 创建一个新的选择下拉对象
【发布时间】：2015-05-31 00:48:54
【问题描述】：

我正在尝试在 jQuery 中创建一个选择 (<select><option...</select>) 对象。

我tried this，但它不会添加选项值和文本：

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') );

This other version (dynamic) 甚至不会显示选择元素：

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') );

【问题讨论】：

标签： jquery html select drop-down-menu

【解决方案1】：

我建议如下：

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');

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

外部JS Fiddle demo，用于实验。

但是，如果您希望在 <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');

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

外部JS Fiddle demo，用于实验。

在上面的代码中，join('') 的使用不是必需的 (JS Fiddle demo)，但出于个人喜好和习惯的考虑，无论如何我都倾向于使用它。

参考资料：

JavaScript：
- Array.prototype.join()。
- Array.prototype.map()。
- Element.outerHTML。
- Option() constructor。
jQuery:
- append()。
- appendTo()。

【讨论】：

【解决方案2】：

使用

var photos = ['_DSC0153.jpg', '_DSC0154.jpg'];
var dropdown = $("<select>", {
    id: 'selectfile'
});

//Iterate the photos 
//Create option 
//and append it to select
for (i = 0; i < photos.length; i++) {
    var option = $('<option></option>', {
        value: i,
        text: photos[i]
    });
    dropdown.append(option);
}
dropdown.appendTo('#gallery');

DEMO

【讨论】：