I'd suggest the following:
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>
External JS Fiddle demo, for experimentation.
If, however, you would prefer to set a string of HTML in the <select>-creation stage, that's entirely possible:
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>
External JS Fiddle demo, for experimentation.
In the above code the use of join('') is not necessary (JS Fiddle demo) but, as a matter of personal preference – and habit, I tend to use it regardless.
References:
