Change select2 option on click

Question

I am using the select2 plugin on my select services_dd in my form, I have a link on the page with a class .js-autoselect. On clicking this I want to take the ID of that link tag and change the select2 option depending on the button they clicked.

The <option> value attribute matches the attribute of the id on the link. The code below is successfully changing the value but the select2 is not updating, it still shows the first selection.

$('.js-autoselect').click(function(e){
    e.preventDefault();
    var option = $(e.target).attr('id').trim().toLowerCase(); // option =link1

    $('#services_dd option:selected').val(option);
    alert($('#services_dd option:selected').val()); // this alerts link1 which is correct

});

Does anyone know how to update the select2

Answer 1

$("#services_dd").select2("val", option);

See the Programmatic Access section of the documentation: http://ivaynberg.github.com/select2/#documentation

Answer 2

Working example

Based on @scoota269's answer I wrote the following JS Fiddle that shows this working: https://jsfiddle.net/robertmassaioli/ro2279ts/5/

That should be able to help you see how to make this work.

Code

Just in case JS Fiddle is ever shut down:

$(function() {
    var select = $("#the-select");
    select.select2();

    $("#update").click(function() {
        // How to remove a value
        select.find("option[value=1]").remove();
        // How to add a value
        select.append("<option value='5'>Five</option>");
        select.select2();
    });

    $("#select").click(function() {
        // How to select a value
        var current = select.select2("val");
        current = current || [];
        current.push(2);
        select.select2("val", current);
    });
});

Answer 3

I think you should simply do

$('#services_dd').val(option);
alert($('#services_dd').val());

Otherwise, in your code, you would only change the value attribute of the selected option (instead of the value of the select element).