All geek questions in one place

JQuery Select2 problem with shown selection

I am working on a selection menu in which I use the Select-2 plugin to customize it as I would like. Thus, I have a problem, I'm trying to recreate the selected items in the input field. Therefore, when you select an item, it appears as a small gray list item in the input field.

Here is the FIDDLE that shows that I have a problem.

Here, this is javascript code, as I create my input field:

var selectMenuItems = [
        {id: 'restaurant', value: 'restaurant'},
        {id: 'shopping', value: 'shopping'},
        {id: 'toilet', value: 'toilet'}
    ]

     function formatSelectItem (selectItem) {
        if (!selectItem.id) { return selectItem.value; }
        var $selectItem = $(
        '<img src="img/markers/'+ selectItem.id.toLowerCase() +'.png"/>' +
        '<span class="select-item-text">'+ selectItem.value+"</span>"
        );
        return $selectItem;
    };

    $("[name='select']").select2({
        placeholder: "Selecteer een categorie",
        templateResult: formatSelectItem,
        data: selectMenuItems
    }).on("change", function(e){
        console.log(e);

        $('.select-multiple :selected').each(function(i, selected) {
            var selectedValue = $(selected).val();

            $('.select2-selection__choice').text(selectedValue);
        });
    });

The problem is that when I select an element, it appears with the text inside the input field, but if I select several elements, all the elements will be changed to this last selected text of the element. How can I bind this .text()to this particular selection element?

Select-2 plugin "Templating", .

+4
4

, jquery, Array selectMenuItems value text, :

 var selectMenuItems = [
   {id: 'restaurant', text: 'restaurant'},
   {id: 'shopping', text: 'shopping'},
   {id: 'toilet', text: 'toilet'}
 ]

, ,

0

.

, , selcted, $(this).val(), .select2-selection__choice .eq():

$("[name='select']").select2({
  placeholder: "Selecteer een categorie",
  templateResult: formatSelectItem,
  data: selectMenuItems
}).on("change", function(e){
  $.each($(this).val(), function(i, selected) {
    $('.select2-selection__choice').eq(i).prepend(selected+' ');
  });
});

. prepend() tex(), "X" .

, .

(function($) {
  $(function() {
    var selectMenuItems = [
      {id: 'restaurant', value: 'restaurant'},
      {id: 'shopping', value: 'shopping'},
      {id: 'toilet', value: 'toilet'}
    ]

    function formatSelectItem (selectItem) {
      if (!selectItem.id) { return selectItem.value; }
      var $selectItem = $(
        '<img src="img/markers/'+ selectItem.id.toLowerCase() +'.png"/>' +
        '<span class="select-item-text">'+ selectItem.value+"</span>"
      );
      return $selectItem;
    };

    $("[name='select']").select2({
      placeholder: "Selecteer een categorie",
      templateResult: formatSelectItem,
      data: selectMenuItems
    }).on("change", function(e){
      $.each($(this).val(), function(i, selected) {
        $('.select2-selection__choice').eq(i).prepend(selected+' ');
      });
    });

  });
})(jQuery);            
.flag-text { margin-left: 10px; }

.select2 {
  width: 100% !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
<select id="type" name="select" class="select-multiple" multiple="multiple" data-role="none"></select>
Hide result

:

(function($) {
  $(function() {
    var selectMenuItems = [
      {id: 'restaurant', value: 'restaurant', img: 'https://www.hughesinsurance.co.uk/img/front/map-marker.png'},
      {id: 'shopping', value: 'shopping', img: 'http://king-of-truck.byclickeat.fr/media/cache/square_40/front/bundle/clickeat/img/map-marker.png'},
      {id: 'toilet', value: 'toilet', img: 'http://www.onebabyowner.co.uk/sites/all/themes/onebabyowner/img/icon/map-marker.png'}
    ]

    function formatSelectItem (selectItem) {
      if (!selectItem.id) { return selectItem.value; }
      var $selectItem = $(
        '<img src="'+ selectItem.img +'"/>' +
        '<span class="select-item-text">'+ selectItem.value+"</span>"
      );
      return $selectItem;
    };

    $("[name='select']").select2({
      placeholder: "Selecteer een categorie",
      templateResult: formatSelectItem,
      data: selectMenuItems
    }).on("change", function(e){
      $.each($(this).val(), function(i, selected) {
        $('.select2-selection__choice').eq(i).prepend(selected+' ');
      });
    });

  });
})(jQuery);            
.flag-text { margin-left: 10px; }

.select2 {
  width: 100% !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
<select id="type" name="select" class="select-multiple" multiple="multiple" data-role="none"></select>
Hide result
+2

:

$('.select-multiple :selected').each(function(i, selected) {
   $('.select2-selection__choice').eq(i).text($(this).val());
});

, templateSelection. , templateSelection JavaScript.

(function($) {
        $(function() {
            var selectMenuItems = [
               {id: 'restaurant', text: 'restaurant', img: 'http://www.freeiconspng.com/uploads/restaurant-icon-png-7.png'},
               {id: 'shopping', text: 'shopping', img: 'http://www.pngall.com/wp-content/uploads/2016/04/Shopping-Free-PNG-Image.png'},
               {id: 'toilet', text: 'toilet', img: 'http://www.freeiconspng.com/uploads/toilet-icon-png-32.png'}
            ]

            function formatSelectItem (selectItem) {
                if (!selectItem.id) { return selectItem.text; }
                var $selectItem = $(
                    '<img src="'+ selectItem.img +'" width="50px" height="50px"/>' +
                    '<span class="select-item-text">'+ selectItem.text+"</span>"
                );
               return $selectItem;
            };
            function formatState (opt) {
                if (!opt.id) {
                   return opt.text;
                }                               
                var $opt = $(
                  '<span><img src="'+opt.img +'" width="50px" height="50px"/>' + opt.text + '</span>'
                );
                return $opt;
            };
            $("[name='select']").select2({
               placeholder: "Selecteer een categorie",
               templateResult: formatSelectItem,
               templateSelection: formatState,
               data: selectMenuItems
            });
            
        });
})(jQuery);            
.flag-text { margin-left: 10px; }

.select2 {
  width: 100% !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
<select id="type" name="select" class="select-multiple" multiple="multiple" data-role="none"></select>
Hide result
+1

        $('.select-multiple :selected').each(function(i, selected) {
            var selectedValue = $(selected).val();

            $('.select2-selection__choice').text(selectedValue);
        });

selectedValue , , .

, :

     $('.select-multiple :selected').each(function(i, selected) {
        var selectedValue = $(this).val();
        $('.select2-selection__choice').eq(i).text(selectedValue);
      });
0

Source: https://habr.com/ru/post/1663358/

More articles:


All Articles