CODEWITHSUNDEEP
jquery-select2
matiazar
matiazar

Reputation: 69

jquery select2 change option text

Can I change the text of an option value? I cant find how to do this...

I must do this

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

thanks in advance !

Upvotes: 5

Views: 18209

Answers (5)

Miguel Silva
Miguel Silva

Reputation: 147

var select = $("#select_id").select2();
$('#select_id').select2();
 
$('#referecedField').on('click', function() {
        select.select2('destroy');          
        $("#select_id").find("option:selected").text('New_Text');
        select.select2();
 });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js" ></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />

<select id="select_id" style="width: 200px">
<option value"1">Text 1</option>
<option value"2">Text 2</option>
<option value"3">Text 3</option>
</select>

<button id="referecedField">Change text of the selected option</button>

Upvotes: 0

RassK
RassK

Reputation: 490

Struggled also with this issue. Found a cleaner way.

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>

Upvotes: 3

forsvunnet
forsvunnet

Reputation: 1258

I had the same issue and I could not find any solution using the select2 API. My workaround was to just target the <span> element that is created when initialising select2.

In my case I just needed to select the first option, this is my code. With some adaptation, you can target any option you'd like.

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

Upvotes: 0

jy95
jy95

Reputation: 783

Try this :

If you change only with the name of the option

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

or if you want to change it with the id of the option 

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

and just like other said, you must trigger the change event (to notify the select2 that data changed)

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

Upvotes: -1

vohrahul
vohrahul

Reputation: 1191

Try this

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

Edited For some weird reason in your code the below thing works for me:

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

Upvotes: 0

Related Questions