関数を定義しようとするとjQueryエラーが発生する

Question

私は選択入力オプションを更新するjavaScript関数を持っています。関数は正常に動作しますが、更新をページの読み込みと親select change（）で行うように、フィールドを2回更新するコードを繰り返す必要があります。これは動作するコードです：

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

はそれが

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) 
     ); 
    } 
    }); 
};