Fixed Bug:1400991 - Modified .off() logic for change events for dropd…

…own.

ISSUE: The dropdowns had stopped working at Server-Manager due to previous fix where .off() handlers were introduced to stop triggering of multiple select2 change events
FIX: .off events are applied selectively and it just disables the change function and rest of the events remain unaffected

Change-Id: Ib2468ef9df52ac9fbc68c251be1bd92462b79344

webroot/js/contrail-elements.js

@@ -971,6 +971,12 @@ function constructSelect2(self, defaultOption, args) {
         option.dataTextField = {dsVar: option.dataTextField, apiVar: 'text'};
         option.dataValueField = {dsVar: option.dataValueField, apiVar: 'id'};
 
+        var changeFunction = function(e) {
+            if (contrail.checkIfFunction(option.change)) {
+                option.change(e);
+            }
+        };
+
         if(!$.isEmptyObject(option) && typeof option.dataSource !== 'undefined') {
             if(option.dataSource.type == "remote"){
                 $.ajax({
@@ -993,13 +999,17 @@ function constructSelect2(self, defaultOption, args) {
         }
         if(typeof option.data != "undefined") {
             option.data = formatData(option.data,option);
+
+            if (contrail.checkIfExist(self.data('contrailDropdown'))) {
+                self.data('contrailDropdown').destroy();
+            }
+
+            if (contrail.checkIfExist(self.data('contrailMultiselect'))) {
+                self.data('contrailMultiselect').destroy();
+            }
+
             self.select2(option)
-                .off("change")
-                .on("change", function(e) {
-                    if (typeof option.change !== 'undefined' && typeof option.change === 'function') {
-                        option.change(e);
-                    }
-                });
+                .on("change", changeFunction);
             if (option.data.length !=0) {
                 self.select2('val', option.data[0].text);
             }
@@ -1062,12 +1072,8 @@ function constructSelect2(self, defaultOption, args) {
                 }
 
                 self.select2(option)
-                    .off("change")
-                    .on("change", function(e) {
-                        if (typeof option.change !== 'undefined' && typeof option.change === 'function') {
-                            option.change(e);
-                        }
-                    });
+                    .off("change", changeFunction)
+                    .on("change", changeFunction);
 
                 if(option.data.length > 0){
                     if(option.data[0].children != undefined && option.data[0].children.length > 0) {
@@ -1118,7 +1124,8 @@ function constructSelect2(self, defaultOption, args) {
                 return true;
             },
             destroy: function(){
-                self.select2('destroy');
+                self.off("change", changeFunction)
+                    .select2('destroy');
             },
             hide: function() {
                 self.select2("container").hide();