嘗試定義函數時發生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) 
     ); 
    } 
    }); 
};