CODEWITHSUNDEEP
htmljquery
Kaan Demir
Kaan Demir

Reputation: 472

Adding options to a select using jQuery?

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'

enter image description here 

$(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>
    <a href="#" id="add-menu" class="btn">add-Menu</a>

Upvotes: 0

Views: 105

Answers (1)

PeterKA
PeterKA

Reputation: 24648

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>
    <a href="#" id="add-menu" class="btn">add-Menu</a>

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.

Upvotes: 2

Related Questions