尝试定义函数时发生jQuery错误

Question

我有一个更新选择输入选项的javaScript函数。该函数工作正常，但我不得不重复两次更新字段的代码，以便更新页面加载以及父母选择更改（）。这是工作的代码：

jQuery.fn.filterOn = function(radio, values) { 
    var firsttime = true; 
    return this.each(function() { 
    var select = this; 
    var options = []; 
    $(select).find('option').each(function() { 
     options.push({ 
     value: $(this).val(), 
     text: $(this).text() 
     }); 
    }); 
    $('#upload_range_manufacturer_category').data('options', options); 
    $(radio).change(function() { 
     var options = $(select).empty().data('options'); 
     var haystack = values[$(radio).val()]; 
     $.each(options, function(i) { 
     var option = options[i]; 
     if($.inArray(option.value, haystack) !== -1) { 
      $(select).append(
      $('<option>').text(option.text).val(option.value) 
      ); 
     } 
     }); 
    }); 
    if(firsttime){ 
     $(function() { 
     var options = $(select).empty().data('options'); 
     var haystack = values[$(radio).val()]; 
     firsttime = false; 
     $.each(options, function(i) { 
      var option = options[i]; 
      if($.inArray(option.value, haystack) !== -1) { 
      $(select).append(
       $('<option>').text(option.text).val(option.value) 
      ); 
      } 
     }); 
     }) 
    } 
    }); 
}; 

而对于选择和功能调用的代码：

<td><select name="upload_range[product_category]" id="upload_range_product_category"> 
<option value="2">Products</option> 
<option value="3">Manufacturers</option> 
</select></td> 
</tr> 
<tr> 
    <th><label for="upload_range_manufacturer_category">Manufacturer category</label></th> 
    <td><select name="upload_range[manufacturer_category]" id="upload_range_manufacturer_category"> 
<option value="4">Sports Equipment</option> 
<option value="6">Bricks</option> 
</select></td> 


<script type="text/javascript"> 
    $(document).ready(function() { 
    var data = {"2":["4"],"3":["6"]}; 
    $('#upload_range_manufacturer_category').filterOn('#upload_range_product_category', data); 
    }); 
</script> 

摆脱代码的重复，我想我可以写这可能是一个功能从当前函数内部调用。但是我的新代码给了我这个错误：

Uncaught TypeError: Object function (a,b){return new e.fn.init(a,b,h)} has no method 'filterSelect'

这是新代码：

jQuery.fn.filterOn = function(field, values) { 
    var firsttime = true; 
    return this.each(function() { 
    var select = this; 
    var options = []; 
    $(select).find('option').each(function() { 
     options.push({ 
     value: $(this).val(), 
     text: $(this).text() 
     }); 
    }); 
    $('#upload_range_manufacturer_category').data('options', options); 
    $(field).change(function() { 
     $.filterSelect(field,select,values); 
    }); 
    if(firsttime){ 
     firsttime = false; 
     $.filterSelect(field,select,values); 
    } 
    }); 
}; 
jQuery.fn.filterSelect = function(field,select,values) { 
    var options = $(select).empty().data('options'); 
    var haystack = values[$(field).val()]; 
    $.each(options, function(i) { 
    var option = options[i]; 
    if($.inArray(option.value, haystack) !== -1) { 
     $(select).append(
     $('<option>').text(option.text).val(option.value) 
     ); 
    } 
    }); 
}; 

如果任何人有一个想法是什么错误男生我可能已经作出，您的输入将不胜感激。我曾尝试在filterOn函数的上面和下面声明filterSelect函数，但都不起作用。

感谢

卢克

Answer 1

尝试在你的filterSelect声明删除.fn所以它应该看起来像

jQuery.filterSelect = function(field,select,values) { 
    var options = $(select).empty().data('options'); 
    var haystack = values[$(field).val()]; 
    $.each(options, function(i) { 
    var option = options[i]; 
    if($.inArray(option.value, haystack) !== -1) { 
     $(select).append(
     $('<option>').text(option.text).val(option.value) 
     ); 
    } 
    }); 
};