Get changed value from <select> using jQuery

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.

@Aniket : Did you checked stackoverflow.com/questions/4076770/… — Jithin
– Jithin, Commented Jul 26, 2012 at 7:38
@Purmou It's a multi select box. That is why there are two selected options. — Aniket
– Aniket, Commented Jul 26, 2012 at 7:42
@Jithin I have looked at that question, but it's not what I am looking for. — Aniket
– Aniket, Commented Jul 26, 2012 at 7:42

Sébastien - Vélhost · Accepted Answer · 2012-07-26 07:37:43Z

8

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;
});

answered Jul 26, 2012 at 7:37

Sébastien - Vélhost

6644 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Aniket Over a year ago

Even I thought of comparing the old input and the new one but that it is a little troublesome. Is this is the only way possible?

Sébastien - Vélhost Over a year ago

I think so because I do not think the event object can store this information.

Aniket Over a year ago

I am not very good as js, so is there a function with which I can compare two arrays and find out the difference directly? :P

Sébastien - Vélhost Over a year ago

there is no function for that, you must iterate through the first array and see if your value is present in the second.

Aniket Over a year ago

I am now sending the complete array to my controller and using array_diff in PHP to get the job done. It is much more simple and suits my needs :) Thanks.

Collectives™ on Stack Overflow

Get changed value from <select> using jQuery

Possible Solutions?

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Possible Solutions?

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related