using select2 and attaching event to it

Question

I am using a simple select2 where in the options i am passing a common class and i need to attach an event that on every change or click of item in the option, it should trigger some jquery event. i have the code like this:

<select name="transferfrom" id="transferfrom" data-placeholder="Please choose one" data-rel="chosen">
        <option value=""></option>  

            <option class="locDetails" id="1" value="1">Main Store</option>

            <option class="locDetails" id="2" value="2">Branch Store A</option>

            <option class="locDetails" id="3" value="3">Branch Store B</option>

            <option class="locDetails" id="4" value="4">Branch Store C</option>

            <option class="locDetails" id="5" value="5">Branch D</option>

    </select>

if i see firebug data for the above, i see he code as:

<div class="controls">
    <div class="select2-container" id="s2id_transferfrom" title=""><a tabindex="-1" class="select2-choice" href="javascript:void(0)">   <span class="select2-chosen" id="select2-chosen-3">Main Store</span><abbr class="select2-search-choice-close"></abbr>   <span role="presentation" class="select2-arrow"><b role="presentation"></b></span></a><label class="select2-offscreen" for="s2id_autogen3"></label><input type="text" role="button" aria-haspopup="true" class="select2-focusser select2-offscreen" aria-labelledby="select2-chosen-3" id="s2id_autogen3"></div><select data-rel="chosen" data-placeholder="Please choose one" id="transferfrom" name="transferfrom" title="" class="select2-offscreen" data-bv-field="transferfrom" tabindex="-1">
        <option value=""></option>  

            <option value="1" id="1" class="locDetails">Main Store</option>

            <option value="2" id="2" class="locDetails">Branch Store A</option>

            <option value="3" id="3" class="locDetails">Branch Store B</option>

            <option value="4" id="4" class="locDetails">Branch Store C</option>

            <option value="5" id="5" class="locDetails">Branch D</option>

    </select><i style="display: none; top: 0px;" class="form-control-feedback" data-bv-icon-for="transferfrom"></i>
    </div>

here is my jquery event what i am trying to do on change of option item or click of option item

$(document).on('change click','#transferfrom option.locDetails',function() {
        var ID = $(this).val();
        alert(ID);
        $(".reloadtransferform").load('transferfrom.cfm?id='+id+'&cache='+Math.random());
    });

but it does seems to work

Answer 1

Try this : attach change event to select box instead of option s.

NOTE - Please make sure that transferfrom is unique id through out the html document.

$(document).on('change','#transferfrom .select2-offscreen',function() {
      var ID = $(this).val();
      alert(ID);
      $(".reloadtransferform").load('transferfrom.cfm?id='+id+'&cache='+Math.random());
});

Answer 2

Try this: FIDDLE

$("#transferfrom").on("change", function(e) { 
    var ID = e.val;
    alert(ID);
    $(".reloadtransferform").load('transferfrom.cfm?id='+ID+'&cache='+Math.random());
})