Question

I have a javaScript function that updates a select inputs options. The function works fine but I have to repeat the code for updating the field twice so that the update is done on page load as well as on parent select change(). This is the code that works:

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

And the code for the select and function call:

<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>

To get rid of the duplication of code, I thought I could write a function that could be called from inside the current function. However my new code gives me this error:

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

This is the new code:

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

If anyone has an idea what schoolboy error I have probably made, your input would be greatly appreciated. I have tried declaring the filterSelect function above and below the filterOn function but neither works.

Thanks

Luke

Answer 1

Try removing .fn in your filterSelect declaration so it should look like

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