使用 jQuery 创建一个新的 select 下拉对象

Question

我正在尝试在 jQuery.

中创建一个 select (<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) 甚至不会显示 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') );

Answer 1

使用

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

Answer 2

我建议如下：

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 demo，用于实验。

但是，如果您希望在 <select>-创建阶段设置一个 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 demo，用于实验。

在上面的代码中 join('') 的使用不是必需的 (JS Fiddle demo) 但是，作为个人喜好和习惯的问题，我倾向于使用它。

参考文献：

JavaScript:
jQuery:
- append().
- appendTo().

使用 jQuery 创建一个新的 select 下拉对象

Create a new select dropdown object with jQuery

html

jquery

select

drop-down-menu