jquery select2更改选项文本

Question

我可以更改选项值的文本吗？我无法找到如何做到这一点......

我必须这样做

$("#select").select2("destroy");
$('#select option[value="' + id + '"]').text(new_text);
$("#select").select2();

提前致谢 ！

Answer 1

试试这个

$("#select").trigger("change");

编辑在你的代码中有一些奇怪的原因，下面的东西对我有用：

$("#select").select2("destroy");
$('#select option[value="' + id + '"]').text(new_text);
window.setTimeout(function () {
                    $("#select").select2();
                },0);

Answer 2

我有同样的问题，我找不到使用select2 API的任何解决方案。我的解决方法是只定位初始化select2时创建的<span>元素。

在我的情况下，我只需要选择第一个选项，这是我的代码。通过一些调整，您可以定位任何您想要的选项。

$("#select").next().find( '.select2-selection__rendered:first')

Answer 3

这个问题也很困难。找到一种更清洁的方式

var $select = $('.js-select2');

$select.select2({
  templateResult: updateSelectTemplate,
  templateSelection: updateSelectTemplate
})

function updateSelectTemplate(data) {
    var $option = $(data.element);

    return $option.data('display');
}

$('.js-change').on('click', function(e) {
  $select.find('option:first').data('display', 'Some new value');
  $select.trigger('change');
});

select {
  width: 200px
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.min.js"></script>

<select class="js-select2">
   <option data-display="Display 1"></option>
   <option data-display="Display 2"></option>
   <option data-display="Display 3"></option>
</select>

<button class="js-change">Change value</button>

Answer 4

试试这个 ：

如果仅使用选项名称进行更改

$('#select option:contains("Old Value")').text('New Value');

或者如果你想用选项的id改变它

$('#' + yourId).text('New Value);

就像其他人说的那样，你必须触发更改事件（通知select2数据已更改）

$("#select").trigger("change");