Adding options to a select using jQuery?

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

$.each(items, function (i, item) -> items is not defined in your code snippit... Is that coming from code you have not included in your question? — dale landry
– dale landry, Commented Aug 15, 2020 at 23:53

PeterKA · Accepted Answer · 2020-08-16 00:35:46Z

2

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.

answered Aug 16, 2020 at 0:35

PeterKA

24.7k5 gold badges28 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Kaan Demir Over a year ago

i know off topic but can i write items items php function?

PeterKA Over a year ago

I would not advise using PHP to create JS. It's better to put the data in a data attribute and JS can read it from there on the client side.

Kaan Demir Over a year ago

var items = [<?php foreach (icons() as $id => $icons): ?>"<?= $icons ?>",<?php endforeach; ?>]; I ran it this way, it worked, do you mind?

PeterKA Over a year ago

Like I said, not a good idea. Ideally, ALL your JavaScript should be in a completely separate file.

Collectives™ on Stack Overflow

Adding options to a select using jQuery?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related