使用jquery在`select`中更改`option`的文本

时间:2015-12-10 14:44:58

标签: javascript jquery html

所以,我正在尝试用jquery更改选项的文本。

HTML

<select id="mySelect">
  <option value="change me">Change me</option>
</select>

JS

$(document).ready(function() {
  $('#mySelect').select2();
$(document).find('option[value="change me"]').text('Changed');
})

嗯,没有任何事情发生 更改“实时”文本很重要 小提琴:https://jsfiddle.net/gmt22ffL/2/

这甚至可能吗?
我使用Jquery插件“Select2”作为我的选择。

1 个答案:

答案 0 :(得分:1)

它有效perfectly fine。但是,让我们尝试添加Select2并查看:

&#13;
&#13;
$(document).ready(function() {
  $('option[value="change me"]').text('Changed');
  $('#mySelect').select2();
});
&#13;
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.full.min.js"></script>
<select id="mySelect">
  <option value="change me">Change me</option>
</select>
&#13;
&#13;
&#13;

交换线条。

销毁和更改:

&#13;
&#13;
$(document).ready(function() {
  $('#mySelect').select2();
  $('#mySelect').select2("destroy");
  $('option[value="change me"]').text('Changed');
  $('#mySelect').select2();
});
&#13;
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.full.min.js"></script>
<select id="mySelect">
  <option value="change me">Change me</option>
</select>
&#13;
&#13;
&#13;