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

试试这个：

如果仅使用选项名称

进行更改

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

或者如果您想使用选项的ID

进行更改

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

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

{{1}}

jquery select2更改选项文本

4 个答案: