显示选择的jQuery Select2问题

Question

我正在选择菜单上工作，在这里我可以使用Select-2插件自定义它。 因此，我遇到一个问题，我尝试在输入字段中重新创建所选项目。 因此，当您选择一个项目时，它会在输入字段中显示为灰色列表小项目。

这是一个显示我所遇到的问题的字段 。

这就是我如何呈现输入字段的javascript代码：

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);
        });
    });

问题是，当我选择一个项目时，它会在输入字段内显示文本，但是如果我选择多个，则所有项目都将变为最后一个选择的项目文本。 我如何只能将此.text()绑定到该特定选择项？

在Select-2插件的插件文档中，有一个名为“模板化”的示例，其中他们不必将文本或图像附加到所选项目。

Answer 1

工作提琴 。

您要查找的是每次循环遍历$(this).val() .select2-selection__choice值， .select2-selection__choice使用.eq()通过索引将值附加到.select2-selection__choice ：

$("[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> 

使用图片的片段：

 (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> 

Answer 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> 

Answer 3

在你的代码中

        $('.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);
      });

Answer 4

我以为我必须用jquery做到这一点，但是当我将selectMenuItems value Array更改为text ，插件为我完成了工作：

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

我认为我可以在此处设置任何属性的简单修复