How to add a new options by user to Select2 dropdown

August 7, 2020
zemna@zemna.net

If you want to give user can add new options to select tag in runtime, you can use Select2 jQuery library to do it.

Final result is like this:

Select2 Dropdown{: .img-responsive }

1. Enable tags option

$('select').select2({
  tags: true
});

2. Handle createTag function to add extra properties

$('select').select2({
  tags: true,
  createTag: function (params) {
    var term = $.trim(params.term);

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

    return {
      id: term,
      text: term,
      newTag: true // add additional perameters
    }
  }
});

3. Update templateResult function to display "(new)" text inside of item

$('select').select2({
  tags: true,
  createTag: function (params) {
    var term = $.trim(params.term);

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

    return {
      id: term,
      text: term,
      newTag: true // add additional perameters
    }
  },
  templateResult: function(data) {
    var $result = $("<span></span>");

    $result.text(data.text);

    if (data.newTag) {
      $result.append(" <em>(new)</em>");
    }

    return $result;
  }
});

References

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram