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

Question

我正在使用 jQuery 插件 select2 V4 和我的 select 字段它正在工作是一个缩进列表，因为它基于父/子关系并且在树的更下方选项越多，缩进 (nbsp;'s) 就越多。

这在 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>