将选项附加到select2

Question

I have the following select:

<select id="street" name="client[street_id]" class="form-control select2" data-placeholder="Select or Insert The Street" style="width: 100%;">
    @foreach($streets as $street)
        <option value="{{ $street->id }}">{{ $street->name }}</option>
    @endforeach
</select>

And the initialisation:

  $(".select2").select2({tags: true});

Note that multiple has not been set to true. The problem is when I enter a new option (tag), first time will add the tag but second time will replace the first one in the list. So how can I add options in the select and keep them? (on each add I will make a request to server to save to db).

https://jsfiddle.net/8c7ujd4g/

Answer 1

I found this solution:

    $('.select2').on("select2:select", function(e) {
        // what you would like to happen
        if(e.params.data.isNew){

            $(this).find('[data-select2-tag="true"]').replaceWith($('<option selected>', { value : e.params.data.id })
                    .text(e.params.data.text));

            $.ajax({
                // ...
            });
        }
    });

        $(".select2").select2({tags: true,

            createTag: function (params) {
                var term = $.trim(params.term);

                if (term === '') {
                    return null;
                }

                return {
                    id: term,
                    text: term,
                    isNew: true // add additional parameters
                }
            }
        });