select2 alert selected option when selecting the value

Question

In select2 how can I alert the option being selected for a multiple select?

This is my code for trigger when select2 option is being selected:

<script>
    $("#list").select2();

    $('#list').on("select2-selecting", function(e) { 
        alert(this.value);
    });     
</script>

This will only alert the already selected value. Not the option that I am selecting.

I can't also do this:

var test = $('#list').val();
alert(test);

Since it will only alert the already selected options as well.

What I want is to alert the option that is still being selected. So if you click the drop-down and select an option it will alert the value of that option.

The first option is selected by default. Sorry I forgot to mention this

Pedram Pedram · Accepted Answer · 2018-01-21T07:51:39

Get selected value with:

$(this).find('option:selected')

Or for multiple use:

$(this).val();

Use like this:

<script>
$('#list').on("select2-selecting", function(e) {
  var val = $(this).val();
  alert(val);
});
</script>

Example:

$("#list").select2();

$('#list').on("change", function(e) { 
  var val = $(this).val();
  alert(val);
});

#list {
width: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script>

<select id="list" multiple>
  <option value="1" selected>1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

select2 alert selected option when selecting the value

2 Answers