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

Question

So, i´m trying to change a text for an option with 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');
})

Well, nothing happends.
It´s important to change the text "live".
Fiddle: https://jsfiddle.net/gmt22ffL/2/

Is this even possible?
I´m using Jquery plugin "Select2" for my select.

Answer 1

It works perfectly fine . But let's try adding Select2 and see:

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

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

Swapping the lines work.

Destroying and changing:

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

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