Adding options to a select using jQuery? - html

Question

i have a button and when i click this button i want a select option added. I can add select but not options, why? I want it added according to the list.
Not adding 'foreach loop option'
$(function () {
var items = ["fa fa-address-book", "fa fa-address-book-o", "fa fa-address-card", "fa fa-address-card-o"];
$('#add-menu').on('click', function (e) {
$('#menu').append('<li>\n' +
'<div class="row">\n' +
'<label class="col-sm-2 col-form-label">Social Media İcon</label>\n' +
'<div class="col-sm-8">\n' +
' <div class="form-group bmd-form-group" id="icon">\n' +
'<select class="form-control selectpicker" id="mySelect" name="icon[]" title="Social Media icon" data-live-search="true" ' +
'data-hide-disabled="true">\n' +
$.each(items, function (i, item) {
$('#mySelect').append($('<option>', {
value: item.value,
text: item.text
}));
}),
'</select>\n' +
'</div>\n' +
'</div>\n' +
'</div>\n' +
'</div>' +
'</li>');
e.preventDefault();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="menus">
<ul id="menu" class="menu">
<li></li>
</ul>
</div>
add-Menu

Answer 1

You're quite close; just replace $.each() with:
items.map(item => `<option>${item}</option>`).join('') +
as in this demo:
$(function () {
var items = ["fa fa-address-book", "fa fa-address-book-o", "fa fa-address-card", "fa fa-address-card-o"];
$('#add-menu').on('click', function (e) {
$('#menu').append('<li>\n' +
'<div class="row">\n' +
'<label class="col-sm-2 col-form-label">Social Media İcon</label>\n' +
'<div class="col-sm-8">\n' +
' <div class="form-group bmd-form-group" id="icon">\n' +
'<select class="form-control selectpicker" id="mySelect" name="icon[]" title="Social Media icon" data-live-search="true" ' +
'data-hide-disabled="true">\n' +
items.map(item => `<option>${item}</option>`).join('') +
'</select>\n' +
'</div>\n' +
'</div>\n' +
'</div>\n' +
'</div>' +
'</li>');
e.preventDefault();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="menus">
<ul id="menu" class="menu">
<li></li>
</ul>
</div>
add-Menu
NOTE
If you intend to add several select tags using the button id="mySelect" will be quite problematic in that you'll end up with more than one element having the same id attribute value. You don't want to end up there.