如何在下拉框下方的Select2中显示选定的标签？ [英] How do I display the selected tags in Select2 below the dropdown box?

问题描述

我使用带标签的Select2（版本4），并希望在输入字段下方显示选定的选项。

不是：

相反有：

这是可能的吗？如果是这样，我该如何实现？

编辑：
代码是：

 < select class =js-example-tags form-controlmultiple =multiple> 
< option selected =selected>橙色< / option> 
< option selected =selected> white< / option> 
< option selected =selected> purple< / option> 
< option selected =selected> red< / option> 
< option selected =selected>蓝色< / option> 
< option selected =selected> green< / option> 
< / select> 
  

和

  $（。js-example-tags）。select2（{
 tags：true 
}）
  

解决方案

当元素被渲染时，为元素添加一个带有类的ul。这个类的名字是： select2-selection__rendered
所以我的想法是在它被渲染后，我可以带这个类并添加一些底部。为此，我使用JQuery使用 $（function（）注意，这样做是在加载所有内容后加载的，因此对于您需要的JavaScript代码，如下所示）：

Javascript代码：

 < script> 
 $（。js-example-tags）。select2（{
 tags：true 
}）; 
 
 $（function ）{
 //这里你添加你需要的底部像素，我添加了200px。
 $（'。select2-selection__rendered'）.css（{top：'200px'，position：'relative'} ）; 
））; 
< / script> 
  

I am using Select2 (version 4) with tags and would like to have the selected choices display below the input field.

So instead of:

Rather have:

Is this possible and if so how do I achieve that?

EDIT: Code is:

<select class="js-example-tags form-control" multiple="multiple">
    <option selected="selected">orange</option>
    <option selected="selected">white</option>
    <option selected="selected">purple</option>
    <option selected="selected">red</option>
    <option selected="selected">blue</option>
    <option selected="selected">green</option>
</select>

and

$(".js-example-tags").select2({
tags: true
})

解决方案

When your elements get rendered, a ul with a class is added for the elements. This class name is: select2-selection__rendered So my idea was that after it was rendered, I could take this class and add some bottom. For this I used JQuery using $(function() note that what this does is to load after everything has loaded, so for the javascript code you need, is as follows (tested):

Javascript code:

  <script>
  $(".js-example-tags").select2({
   tags: true
  });

   $(function() {
      //Here you add the bottom pixels you need. I added 200px.
      $('.select2-selection__rendered').css({top:'200px',position:'relative'});
   });
  </script>

这篇关于如何在下拉框下方的Select2中显示选定的标签？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！