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

Question

我正在使用 jQuery 插件 select2 V4 我的 select 字段是一个缩进列表，因为它基于关闭 parent/child 关系，选项树越往下，缩进（nbsp;'s）越多。

这在 select2 中显示正常，但是当您实际 select 一个选项时，text 插入当前 selection 元素 (.select2-selection__rendered) 的值看起来很愚蠢，因为它在左侧包含一堆空白。

有没有 trim 这个空格 before/after 放在元素中？

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

有点像..

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

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

Answer 1

Working fiddle for older versions.

Is there anyway to trim this whitespace before/after it is placed in the element?

是的，您可以通过使用 .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 中的当前选择元素中的选择文本

Alter selection text inserted into current selection element within select2

javascript

jquery

onchange

jquery-select2

select2