Getting the onChange value before actually changing Select Box

Question

I'm trying to develop a function to fetch the onChange value from a select box before it actually changes.

Lets imagine I have a select box like this:

<select id='testing_combobox'>
   <option value='0'>Test</option>
   <option value='1'>Test 1</option>
   <option value='2'>Test 1</option>
</select>

And when I click in a specific link I run this next jquery code:

$('#link').click(function(){
   $('#testing_combobox').val(299);
});

Now what I want is to have an attached trigger in the select box which would catch the value 299 parse and validate it according to some rules and if everything is ok I'll then actually change the select box.

No, I cannot change the .click function since that belongs to an external module.

And I can't also put the val in a hidden input to validate it.

Any ideas?

Possible duplicate of [Getting value of select (dropdown) before change](http://stackoverflow.com/questions/4076770/getting-value-of-select-dropdown-before-change) — guradio, Oct 13 '15 at 10:49
This isn't what I need... but thank you! My issue is a little diferent. — Pedro Monteiro, Oct 13 '15 at 10:55

score 1 · Answer 1 · answered Oct 13 '15 at 11:04

You can get the current value at the point of 'mousedown' on the button, which fires before click:

$('#link').mousedown(function(){
   var combobox = $('#testing_combobox');

   combobox.data('prevVal', combobox.val());

});

There are some problems you still face though. When setting val() through jQuery, the change event doesn't fire which is issue 1. Issue 2 is that val wont set anything if there isnt a valid value in the select options list.

Without manually triggering the change event, you would have to poll the value, but that won't change because of issue 2.

Is the module likely to change what it is doing? You could unbind the event and rebind your own, which is pretty 'hacky'

Why cant you use a hidden input?

Thanks! this could be a soluction, but actually I will need to know the Link ID and this will be very hard to know.... — Pedro Monteiro, Oct 13 '15 at 11:11
Do they all have the same class? You could change the selector for unbinding to get all the link buttons you need that way, or maybe they are inside a container with an ID or class which is known? — Steven Brookes, Oct 13 '15 at 11:46

score 1 · Answer 2 · answered Oct 13 '15 at 11:22

Here is a working fiddle.

HTML

<select id='testing_combobox'>
   <option value='0'>Test</option>
   <option value='1'>Test 1</option>
   <option value='2'>Test 2</option>
</select>

JS

var isValid = function(itemVal) {
    // Do your logic here are return true/false
    // For now I am always returning false
    return false;
}

var lastItemSelected = $('#testing_combobox').val();
$('#testing_combobox').change(function(event){
   var selectedItemVal = $(this).val();
    if(!isValid(selectedItemVal)) { // Check if it is not valid then select previous value
        $(this).val(lastItemSelected);
        return;
    }
    lastItemSelected = $(this).val();
});

// Trigger event on link click. You can assign whatever value you want to assign and then trigger change event.
$('#link').click(function(){
    $('#testing_combobox')
     .val('2')
     .trigger('change');
});

Hope this is what you need!

Set some default value in select and set their value to `NULL` . For ex: ``. Does that make sense? — Deepak Biswal, Oct 13 '15 at 11:32

score 0 · Answer 3 · answered Oct 13 '15 at 12:10

This issue was posted by Pedro Monteiro by my request, so, maybe i can better explain it myself.

This issue reported was an example, i'll try to summarize the true problem.

Initially we had a select box with over 40k entries, which was making the website getting very slow. Due to that we've started using an external module called Selectize.

What selectize does is to hide the initial select box and removes all entries in there and then creates his own div with all the entries that should be in the initial select box.

In practical terms what happens is this: BEFORE:

<select id='test'>
  <option value=1>test1</option>
  <option value=2 selected>test2</option>
  <option value=3>test3</option>
</select>

AFTER CALLING SELECTIZE:

<select id='test>
   <option value='2' selected>test2</option>
</select>

<div id='test-selectize'>
  <div data-value=1>test1</div>
  <div data-value=2>test2</div>
  <div data-value=3>test3</div>
</div>

What happens is that each time i select an option in the selectize generated combobox he creates that selected item in the initial select box and puts it selected.

So in the initial select box i'll only have the 'real, selected value'.

Until here everything's perfect. The problem that we're now facing is that this is a project with over 4 years of development with thousands of code lines.

And there are many code lines that will force the selection of value via jquery to a select box. Something like this $('#test').val(3);

But now since we're using the Selectize module, the initial select box does not have that option on it.

So what we wanted to do is almost a try/catch, so when i try to change the value of my initial select box via code i grab that event and instead of 'changing' the value of the select box i'll call my own function which will select the value on the Selectize module instead.

The easy solution would be to grab all code done during the past 4 years and in each place where i'm forcing the .val on a select box i'll re-write it to use the new module, but, this is very time consuming and of course bugs will appear for sure.

Hope this has explained better the problem.

.val doesn't trigger the change event, only user input will, so you'd have to trigger the event manually by appending .trigger('change') to any calls to val() for the select menus. Another option is to find anywhere the select menus in question are set using val() and replace val with updateVal and implement the following: $.fn.updateVal = function (value) { //Do selectize logic } — Steven Brookes, Oct 13 '15 at 13:28

Getting the onChange value before actually changing Select Box

3 Answers3