Question

I am trying to get the changed value of a <select> input using jQuery.

Before change

<select class="input" multiple="multiple" name="inputUserRoles[]">
  <option value="Administrator">Administrator</option>
  <option value="Faculty" selected="selected">Faculty</option>
  <option value="Head of Department">Head of Department</option>
  <option value="Faculty Coordinator" selected="selected">Faculty Coordinator</option>
</select>

After change

<select class="input" multiple="multiple" name="inputUserRoles[]">
  <option value="Administrator">Administrator</option>
  <option value="Faculty" selected="selected">Faculty</option>
  <option value="Head of Department">Head of Department</option>
  <option value="Faculty Coordinator">Faculty Coordinator</option>
</select>

If you notice, after the change event, the option ‘Faculty Coordinator’ is not selected.

I wish to get the value ‘Faculty Coordinator’.

My javascript code

$('select[name="inputUserRoles[]"]').change(function(e) {
  // this line gives me the value after the change event.
  var inputUserRoles = $(this).val();
});

Possible Solutions?

I was thinking that the event (e) should be containing the changed data but I have no idea how to get it. The project I am working on is in its final phase and I just need to figure out this part to complete the similar remaining modules.

The other way to get this done is by getting the old input and comparing.

Answer 1

Do that:

var valueBeforeChange = $('select[name="inputUserRoles[]"]').val();

$('select[name="inputUserRoles[]"]').change(function(e) {
  var inputUserRoles = $(this).val();

  //you can compare here with value before change
  ...

  valueBeforeChange = inputUserRoles;
});