jQuery - How to save jQuery block of code in a function

Question

I have a jQuery Code, see below please.

$(document).ready(function () {    
    $('select').on('change', function () {
      var test = this.value;
      console.log(test);
    })

});

which is working perfectly.

Now what I would like to do is, I want to save this code as a function so I can use it somewhere else. Can you help me please?

update

as you can see on the photo, there is a dropdownlist.

src="https://maps.googleapis.com/maps/api/js?
key=MYAPIKEY&
callback=initAutocomplete

&language=fr" 

what I want to update is, whenever I choose the language from the dropdownlist the src attribute should get updated. In the src attribute you can see the value and in that value the last parameter is language.

I want to update the language parameter according to the dropdownlist.

Answer 1

Create a function like this:

function onChange() {
  var test = this.value;
  console.log(test);
});

Then, use that function as the change event handler:

$(document).ready(function () {    
    $('select').on('change', onChange);
});

Now you can reuse this function for any event handler.

Answer 2

There's multiple answer to store what you've done.

You can just store your action into a function, or you can create and attach the result action function into one function.

 $(".my-select").on("change",function(){ actionAfterChange($(this).val()) }); //Just action function actionAfterChange(value){ console.log("function actionAfterChange > ",value) } //Create event listener and attach a function function attachEventAndAction(element,event,action){ $(element).on(event,function(){ action($(this).val()) }); } attachEventAndAction(".my-select2","change",actionAfterChange)

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select class="my-select"> <option value="1">1</option> <option value="2">2</option> </select> <select class="my-select2"> <option value="1">1</option> <option value="2">2</option> </select>