Question

我正在使用jQuery插件select2 V4 ，而我正在处理的select字段是一个缩进列表，因为它基于父/子关系而且进一步在树下面，选项越多，缩进（nbsp;）就越多。

这在 select2 中显示正常，但是当您实际选择选项时，插入当前选择元素的 text 值（ .select2-selection__rendered）看起来很愚蠢，因为它在左边包含一堆空格。

无论如何在将这个空格放入元素之前/之后修剪它？

我想通过获取select2-selection__rendered元素的内容来尝试定位html内容，但我不确定如何定位正确的元素。

像...这样的东西。

$('select').on('change', function(e) {
    // Something here...
});

对e目标所做的更改不会影响我不想要的实际select元素。

Answer 1

<强> Working fiddle for older versions

无论如何在将这个空格放入元素之前/之后修剪它？

是的，您可以通过使用.trim()使用所选文本进行调查并使用更改时使用text()覆盖它来使用解决方法：

$('#my_select').on('change', function(e) {
    var selected_text_container = $('#s2id_my_select .select2-choice span');
    selected_text_container.text(selected_text_container.text().trim());
});

<强> Working fiddle for version 4

在版本4中没有select2-choice所以请直接使用生成的ID：

$('#my_select').on('change', function(e) {
    var selected_text_container = $('#select2-my_select-container');
    selected_text_container.text(selected_text_container.text().trim());
});

希望这有帮助。

版本4：

$("select").select2();

$('#my_select').on('change', function(e) {
  var selected_text_container = $('#select2-my_select-container');
  selected_text_container.text(selected_text_container.text().trim());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://select2.github.io/dist/css/select2.min.css" rel="stylesheet"/>
<script src="https://select2.github.io/dist/js/select2.full.js"></script>
<select id='my_select' style="width:300px">
  <option value="AL">A</option>
  <option value="Am">&nbsp;&nbsp;A.a</option>
  <option value="An">B</option>
  <option value="Ak">&nbsp;&nbsp;B.a</option>
  <option value="WY">&nbsp;&nbsp;&nbsp;&nbsp;B.a.1</option>
</select>

旧版本：

$("select").select2();

$('#my_select').on('change', function(e) {
  var selected_text_container = $('#s2id_my_select .select2-choice span');
  selected_text_container.text(selected_text_container.text().trim());
});

<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/3.2/select2.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.2/select2.min.js"></script>
<select id='my_select' style="width:300px">
  <option value="AL">A</option>
  <option value="Am">&nbsp;&nbsp;A.a</option>
  <option value="An">B</option>
  <option value="Ak">&nbsp;&nbsp;B.a</option>
  <option value="WY">&nbsp;&nbsp;&nbsp;&nbsp;B.a.1</option>
</select>

更改选择文本插入select2中的当前选择元素

1 个答案: