Get changed value from <select> using jQuery
<p>I am trying to get the changed value of a <code>&lt;select&gt;</code> input using <strong>jQuery</strong>.</p>

<p><strong>Before change</strong></p>

<pre><code>&lt;select class="input" multiple="multiple" name="inputUserRoles[]"&gt;
  &lt;option value="Administrator"&gt;Administrator&lt;/option&gt;
  &lt;option value="Faculty" selected="selected"&gt;Faculty&lt;/option&gt;
  &lt;option value="Head of Department"&gt;Head of Department&lt;/option&gt;
  &lt;option value="Faculty Coordinator" selected="selected"&gt;Faculty Coordinator&lt;/option&gt;
&lt;/select&gt;
</code></pre>

<p><strong>After change</strong></p>

<pre><code>&lt;select class="input" multiple="multiple" name="inputUserRoles[]"&gt;
  &lt;option value="Administrator"&gt;Administrator&lt;/option&gt;
  &lt;option value="Faculty" selected="selected"&gt;Faculty&lt;/option&gt;
  &lt;option value="Head of Department"&gt;Head of Department&lt;/option&gt;
  &lt;option value="Faculty Coordinator"&gt;Faculty Coordinator&lt;/option&gt;
&lt;/select&gt;
</code></pre>

<p>If you notice, after the change event, the option 'Faculty Coordinator' is not <code>selected</code>.</p>

<p>I wish to get the value 'Faculty Coordinator'.</p>

<p><strong>My javascript code</strong></p>

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

<h2>Possible Solutions?</h2>

<p>I was thinking that the event <strong>(e)</strong> 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.</p>

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