jQuery, trigger change also on already selected option

Question

I have a problem with my select. I want that the already selected option also triggers the .change() function. Currently it triggers only when another option is selected. How can I put this possibility without much Soucrecode. Maybe there is already a possibility I do not know.

Here a fiddle with an example

edit:

I should perhaps mention that it should work on mobile browsers!

As event name is telling change only triggers on value change... — Mr.TK, May 19 '14 at 08:29
Q: Why do you need it to re-trigger on selecting the already selected item? From a UI perspective you would not expect an event to occur as nothing has changed. — iCollect.it Ltd, May 19 '14 at 08:30
@TimRücker are you just wanting the event to trigger for the default value? If so, just `.change()` after binding the event, [demo here](http://jsfiddle.net/G257s/14/) — billyonecan, May 19 '14 at 08:42
Funny that something like this proves to be this hard, especially with different behaviour per browser. Here's another link that adresses multiple browsers (don't know about mobile): http://stackoverflow.com/questions/6207929/is-there-a-dom-event-that-fires-when-an-html-select-element-is-closed — Me.Name, May 19 '14 at 08:49

A. Wolff · Accepted Answer · 2014-05-19T09:55:57.800

EDIT: IE doesn't handle it nicely! :(

To support IE, you could use:

--DEMO--

$(document).ready(function () {
    var con = $('#console');
    $('select').change(function () {        
        /* change also on already selected option */
        con.append('- ' + $(this).val() + '<br/>');
        //$(this).blur();
    }).change().bind('mousedown', function () {
        this.selectedIndex = -1;
        this.selectedIndex = $(this).find('option:selected').index();
    });
});

See if that fits your needs:

--DEMO--

$(document).ready(function () {
    var con = $('#console');
    $('select').change(function () {        
        /* change also on already selected option */
        con.append('- ' + $(this).val() + '<br/>');
    }).change().bind('mousedown', function () {
        //on mousedown, clone SELECT element to display current selected value
        // this would be empty value otherwise when setting current selected index
        // NOTE: seems to be still not as good on IE...
        // FF would need to redefine some margin/padding
        if (!$(this).data('cloned')) $(this).data('cloned', $(this).clone().css({
            position: 'absolute',
            pointerEvents: 'none',
            top: this.offsetTop,
            left: this.offsetLeft,
            margin: 0
        }).appendTo('body'));
        // here set selectedIndex of SELECT element to not defined index
        // this would let on change event to be fired in all cases
        this.selectedIndex = -1;
    }).blur(function(){
        // on blur, remove cloned SELECT element and reset specific data object
        if ($(this).data('cloned')) {
            this.value = $(this).data('cloned').val();
            $(this).data('cloned').remove();
            $(this).data('cloned', null);
        }
    });
});

@TrueBlueAussie Set `this.selectedIndex = -1` to trigger onchange event on any option selected. Using cloned element for UI because otherwise SELECT reflected value would be empty. This needs more tests to see if that fits OP's needs. I'm not sure this would handle all expected cases — A. Wolff, May 19 '14 at 09:03
I think that fits my needs. If you could explain your code in your answer, I mark your answer as right. — Nano, May 19 '14 at 09:10
It is unfortunate the behavior is so ugly in IE. The click reaction and display are almost unusable. Maybe some tweaking for IE to make it perfect? — iCollect.it Ltd, May 19 '14 at 09:36
@TrueBlueAussie this would work on IE: http://jsfiddle.net/G257s/20/ EDIT: still needs some shim for IE8 :( — A. Wolff, May 19 '14 at 09:54

score 0 · Answer 2 · edited May 23 '17 at 10:25

0

by Daniel Eidson

function onSelectChange(){
    alert('changed');
};

var select2 = $("#select").select2().data('select2');

select2.onSelect = (function(fn) {
    return function(data, options) {
        var target;

        if (options != null) {
            target = $(options.target);
        }

        if (target) {
            onSelectChange();
            return fn.apply(this, arguments);
        }
    }
})(select2.onSelect);

DEMO

In HTML: add an id to select

<select id="select">
    <option selected>Selected</option>
    <option>Not selected</option>
</select>
<div id="console"></div>

edited May 23 '17 at 10:25

Community

1
1

answered May 19 '14 at 08:28

mohamedrias

18,326
2
38
47

2

that doesnt work at all...its triggert to soon, before a slection is made – Nano May 19 '14 at 08:29
Please check the demo url, you will find that its working fine – mohamedrias May 19 '14 at 08:31
It triggers on both clicking the select & options. @TrueBlueAussie – mohamedrias May 19 '14 at 08:40
The OP wanted to trigger the event when the user either changes the options or not. So according to me this does the does. Its working in demo too – mohamedrias May 19 '14 at 08:42
Sorry for that. I have updated answer based on Daniel's response in another question – mohamedrias May 19 '14 at 08:48
1

could you explain where you define the `.select2()` function? – Nano May 19 '14 at 08:52
It looks like it just replaces the Select with a new DOM. But it doesnt work on all mobile Browsers. Or rather, it does not behave like a normal select. Thank you anyway! – Nano May 19 '14 at 09:03

jQuery, trigger change also on already selected option

2 Answers2

--DEMO--

--DEMO--