Calling Plugin Extension methods on Selection change of dropdown and getting back response value in the widget

Hi,

I have Widget with dropdown ,on selection change of the dropdown i need to call a Plugin Method that has input paramaters.How to achieve this.

Dropdown code

=============

<select  id="drop" name="drop">

              <option value="">Select</option>

              #foreach( $item in $SchoolResponse)                    

               <option value="$item.SchoolId">$item.Schoolname</option>                

              #end

        </select>

Selection change event

=====================

$("#drop").change(function () {

var strvalue = "";

        var strrid = "";

        $("#drop option:selected").each(function () {

            strvalue += $(this).text() + " ";

            strrid += $(this).val();

         });

});

In the above method i want to call the plugin method on selection change of the dropdown and set back the response value to a varible..Kindly provide your inputs.

I am not able to get the plugin method values ,below is the steps i followed.

I have created plugin method and on "Selection change" of dropdown registering the ".vm file" & passing selected value id.Below is the code

content script code

===============

#registerEndOfPageHtml('telligent.evolution.widgets.studentKeyList')

   <script type="text/javascript" src="$core_v2_encoding.HtmlAttributeEncode($core_v2_widget.GetFileUrl('grd.js'))"></script>

#end

#registerEndOfPageHtml()

   <script type="text/javascript">

   //<![CDATA[

jQuery(document).ready(function(j){

     //On dropdown selection change  below function is called        

       $("#drop").change(function () {

              var schoolvalue = "";

              var schoolid = "";

               $("#drop option:selected").each(function () {

                 schoolvalue += $(this).text() + " ";

                 schoolid += $(this).val();

              });

              alert(schoolid);              

                 jQuery.telligent.evolution.widgets.studentKeyList.register({

                 wrapper: "#$core_v2_encoding.JavascriptEncode($core_v2_widget.WrapperElementId)",

                 nameInputschoolid:schoolid,

                 createUrl: "$core_v2_encoding.JavascriptEncode($core_v2_widget.GetExecutedFileUrl('grids.vm'))"

                   });  

             });              

        });

//]]>

</script>

#end

"grd.js" file code

==============

(function($) {

   var studentKeyList = function(context) {    

       $.telligent.evolution.post({

url: context.createUrl,

data: {

Name: $(context.nameInputschoolid).val()

},

success: function (response) {

window.location.href = window.location.href;

}

});

};

var api = {

    register:function(context) {  

             context.nameInputschoolid = $(context.nameInputschoolid);

            studentKeyList(context);

}

};

if (typeof $.telligent === 'undefined') { $.telligent = {}; }

if (typeof $.telligent.evolution === 'undefined') { $.telligent.evolution = {}; }

if (typeof $.telligent.evolution.widgets === 'undefined') { $.telligent.evolution.widgets = {}; }

$.telligent.evolution.widgets.studentKeyList = api;

}(jQuery));

"grids.vm"  file code

===============

#if ($core_v2_page.IsPost)

  #set($school = $core_v2_page.GetFormValue('Name'))

  #set($student =  $HTMLPlugin.Getliststudent())    

  $student    

#end

As  you said above,I have gone through the "Create API Key"  widget of "ui.js" & "create.vm"  file there it is given for on click of submit button, i need it for on selection change/on change of dropdown. Kindly provide the steps.