0

I have a select tag like this

<select class="selecttag" onchange="onchangeEvent()">
<option value="1">value1</option>
<option value="2">value2</option>
<option value="3">value3</option>
<option value="4">value4</option>
</select>

How can I get selected option before onchange event?

sahar21
  • 176
  • 1
  • 14

4 Answers4

3

You can store the value in the element's data on a focus event.

e.g. something like:

$('.selecttag').on('focus', function(){
   $(this).data("value", $(this).val());
})

then in the change event you get the data("value") back.

e.g.

$('.selecttag').on('change', function(){
   var orig = $(this).data("value");
   var newVal = $(this).val();
   // Save the newer value 
   $(this).data("value", $(this).val());
   // Do something with both values!
});

Notes:

  • I use jQuery event handlers only above and recommend you do not mix inline event handlers with jQuery. This avoid separating the event registration from the event handler and enables the extra event features jQuery provide.
  • Using jQuery handlers lets you chain them too:

e.g.

$('.selecttag').on('focus', function(){
   $(this).data("value", $(this).val());
}).on('change', function(){
   var orig = $(this).data("value");
   var newVal = $(this).val();
   // Save the newer value 
   $(this).data("value", $(this).val());
   // Do something with both values!
});

The focus is actually redundant after the first time, so you can just do it once, like this:

$('.selecttag').one('focus', function(){
   $(this).data("value", $(this).val());
}).on('change', function(){
   var orig = $(this).data("value");
   var newVal = $(this).val();
   // Save the newer value 
   $(this).data("value", $(this).val());
   // Do something with both values!
});
Gone Coding
  • 88,305
  • 23
  • 172
  • 188
  • Your answer is pretty much the same as the answer in the question that I commented that this question is a dupe of. Please vote to close as such. – j08691 Jan 20 '16 at 17:45
  • @j08691: looking at the dupe question, I dislike the top answer a lot. You should not have to use IIFEs, just to scope a local value, when `data()` is available :( – Gone Coding Jan 20 '16 at 17:50
  • thanks a lot.It works. – sahar21 Jan 20 '16 at 18:04
0

Set the previous value in a var, and update it on change. Your onchange should be managed in JS:

var prev = $("#select").val();
$("#select").on("change", onchangeEvent);

function onchangeEvent() {
  var curr = $("#select").val();
  console.log("Prev: " + prev, "Current: " + curr);
  prev = curr;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select" class="selecttag">
  <option value="1">value1</option>
  <option value="2">value2</option>
  <option value="3">value3</option>
  <option value="4">value4</option>
</select>
Magicprog.fr
  • 3,914
  • 4
  • 26
  • 34
0

I would grab the current value of #selecttag prior to doing anything like this:

$(document).ready(function(){
    var selected = $(".selecttag option:selected");
    // do whatever after this
});
AGE
  • 3,389
  • 3
  • 34
  • 56
-2

You can use jQuery to get the value.

$( "#selecttag" ).val();
jasonwarford
  • 746
  • 5
  • 11