javascript - DropDownList Change() doesn't seem to fire -

so, have been bashing head against desk day now. know may simple question, answer eluding me. help?

i have dropdownlist on modal built partial view. need handle .change() on dropdownlist, pass selected text dropdownlist method in controller give me data use in listbox. below code snippets research led me to.

all other controls on modal function perfectly.

can see going wrong or maybe point me in right direction?

processcontroller

// have tried [httpget], [httppost], , no attribute public actionresult regionfilter(string regionname) {     // breakpoint here never hit     var data = new list<object>();     var result = new jsonresult();     var vm = new propertymodel();     vm.getproperties();      var propfilter = (from p in vm.properties                       p.region == regionname && p.class == "comparable"                       select p).tolist();      var listitems = propfilter.todictionary(prop => prop.id, prop => prop.name);      data.add(listitems);     result.data = data;     return result; } 

razor view

@section scripts{     @scripts.render("~/scripts/ui_propertylist.js") }  ...  <div id="wrapper1">     @using (html.beginform())     {         ...          <div id="fancyboxproperties" class="content">             @html.partial("propertylist", model)         </div>          ...          <input type="submit" name="bt_submit" value="@viewbag.title" class="button" />     } </div> 

razor (partial view "propertylist.cshtml")

...   @{ var regions = (from r in model.properties                 select r.region).distinct(); } <div>     <label>region filter: </label>     <select id="ddl_region" name="ddl_region">         @foreach (var region in regions)         {             <option value=@region>@region</option>         }     </select> </div>  // listbox needs update after region selected <div>      @html.listboxfor(x => x.properties, model.properties.where(p => p.class == "comparable")         .select(p => new selectlistitem { text = p.name, value = p.id }),         new { multiple = "multiple", id = "lb_c" }) </div>  ... 

javascript (ui_propertylist.js)

$(function () {      // other events work     ...      $("#ddl_region").change(function () {             $.getjson("/process/regionfilter/" + $("#ddl_region > option:selected").attr("text"), updateproperties(data));         }); });  function updateproperties(data, status) {     $("#lb_c").html("");     (var d in data) {         var addoption = new option(data[d].value, data[d].name);         addoption.appendto("#lb_c");     } } 

the callback function passed $.getjson method wrong. need pass reference function, not invoke it.

try this:

$.getjson("/process/regionfilter/" + $("#ddl_region > option:selected").text(), updateproperties); 

also, in order text of selected drop-down option, need use text() function:

$("#ddl_region > option:selected").text() 

see documentation