Bootstrap select: selecting options using jquery

Question

I'm trying to select the already selected options via jquery, however the black tick isn't visible:

Tried selecting it:

$('.skills :last').find('option:contains("Calculating data")').prop('selected', true);
[option]

$('.skills :last').val();
["Calculating data↵"]

$('.skills');
[div.btn-group.bootstrap-select.show-tick.skills.job-seeker-content-spacing, select.selectpicker.skills.job-seeker-content-spacing]

$('.skills :first').find('option:contains("Calculating data")').prop('selected', true);
[option]

$('.skills :first').val();
""

also tried with click , on the shell it shows it's been selected but doesn't show the select on the site example:

Answer 1

If you want the text :

var text = $('.skills').find(":selected").text();

If you want the value :

var value = $('.skills').find(":selected").val();

Answer 2

I don't know much about bootstrap-select but after some digging into it, I fount a way,

after you call

$('.skills :last').find('option:contains("Calculating data")').prop('selected', true);

The option get selected and works properly,

let's assume the select tag has #selecting id,

now call this to refresh bootstrap-select to get that tick,

$("#selecting").data("selectpicker").refresh()