Javascript – always trigger “change”-event for , even if the select2-option clicked is already selected

javascriptjqueryjquery-select2

I have a native <select>-element based on which I'm initializing a select2-dropdown-menu.
I bound a change-event via select2 which is called whenever the select2/select-option is changed. However, I need to fire the event even if the currently selected option is selected again.

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

$("#select").select2().bind('change', onSelectChange);

I prepared a http://jsfiddle.net/rb6pH/1/ – if "Alaska" is currently selected and then selected again via the select2-dropdown, onSelectChange() should fire again, triggering the alert.

I have a hard time expressing myself, please ask if something isn't clear enough.

Best Answer

Motivated by the absolutely valid remarks by @FritsvanCampen, I sat my ass down and figured out a way myself: What I really needed was a way to access the currently selected val, even if it hadn't changed. By using select2's undocumented close-event instead of change, I can access just that like so:

function onSelectChange(event){
    alert( $("#select").select2("val") );
};

$("#select").select2().bind('close', onSelectChange);

Find an updated jsFiddle at http://jsfiddle.net/rb6pH/42/

Related Solutions

Javascript – How to remove all the options of a select box and then add one option and select it with jQuery

$('#mySelect')
    .find('option')
    .remove()
    .end()
    .append('<option value="whatever">text</option>')
    .val('whatever')
;

Javascript – How to change the href attribute for a hyperlink using jQuery

Using

$("a").attr("href", "http://www.google.com/")

will modify the href of all hyperlinks to point to Google. You probably want a somewhat more refined selector though. For instance, if you have a mix of link source (hyperlink) and link target (a.k.a. "anchor") anchor tags:

<a name="MyLinks"></a>
<a href="http://www.codeproject.com/">The CodeProject</a>

...Then you probably don't want to accidentally add href attributes to them. For safety then, we can specify that our selector will only match <a> tags with an existing href attribute:

$("a[href]") //...

Of course, you'll probably have something more interesting in mind. If you want to match an anchor with a specific existing href, you might use something like this:

$("a[href='http://www.google.com/']").attr('href', 'http://www.live.com/')

This will find links where the href exactly matches the string http://www.google.com/. A more involved task might be matching, then updating only part of the href:

$("a[href^='http://stackoverflow.com']")
   .each(function()
   { 
      this.href = this.href.replace(/^http:\/\/beta\.stackoverflow\.com/, 
         "http://stackoverflow.com");
   });

The first part selects only links where the href starts with http://stackoverflow.com. Then, a function is defined that uses a simple regular expression to replace this part of the URL with a new one. Note the flexibility this gives you - any sort of modification to the link could be done here.

Related Topic

• Javascript – Change the selected value of a drop-down list with jQuery
• Javascript – Getting value of select (dropdown) before change
• Jquery – Set select option ‘selected’, by value
• Jquery – How to change selected value of select2 dropdown with JqGrid
• Javascript – Select2 auto trigger event change
• How to submit data with Dojo DateTextBox after selecting a date