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

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

＆＃13;

var photos = [
  '_DSC0153.jpg',
  '_DSC0154.jpg'
];

$('<select>', {
  'id': 'selectfile'
}).append(function() {
  return photos.map(function(el, i) {
    return new Option(el, i);
  });
}).appendTo('body');

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

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

＆＃13;

var photos = [
  '_DSC0153.jpg',
  '_DSC0154.jpg'
];

$('<select>', {
  'id': 'selectfile',
  'html': photos.map(function(el, i) {
    return new Option(el, i).outerHTML;
  }).join('')
}).appendTo('body');

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

外部JS Fiddle demo，用于实验。

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

参考文献：

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

Answer 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

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

2 个答案: