Question

I have a piece of jQuery code that, when the user changes the value of a select, it copies the value selected down to other similar selects (same CSS class) that follow the one changed, if they don’t have a value already. Is there a more efficient way to do the following? It runs a bit sluggishly, at least in IE7.

$('.selectclass').change(function() {
  if ($(this).val() != '') {
    var baseElem = $(this);
    $('.selectclass:gt(' + $('.selectclass').index(this) + ')').each(function (i) {
      if ($(this).val() == '') {
        $(this).val(baseElem.val());
     } 
    });
  }
}); 

Answer 1

This should be better optimised:

$('input.selectclass').change(function(){
    if (this.value !== '') {
        var newVal = this.value,
            boxes = $('input.selectclass');

        boxes.slice(boxes.index(this)).val(function(i, oldVal) {
            return oldVal === '' ? newVal : oldVal;
        });
    }
});

NB this is untested. If you could provide an HTML sample (e.g. jsfiddle) it could be tested more easily…

The efficiencies made here:

• using input.selectclass should be faster than .selectclass, particularly in Internet Explorer
• caching the selector rather than re-using it
• using this.value rather than creating a new jQuery instance
• using the inbuilt callback signature of val rather than doing the looping manually with each.