Question

我有一个更新选择输入选项的javaScript函数。该函数工作正常，但我必须重复两次更新字段的代码，以便在页面加载和父选择change（）上完成更新。这是有效的代码：

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>

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

未捕获TypeError：对象函数（a，b）{return new e.fn.init（a，b，h）} 没有方法'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)
        );
    }
  });
};

尝试定义函数时出现jQuery错误

1 个答案: