Question

我有一段jQuery代码，当用户更改select的值时，它会将选定的值复制到其他类似的选择（相同的CSS类），如果它们没有更改价值已经。是否有更有效的方法来执行以下操作？它运行有点迟缓，至少在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

这应该更好地优化：

$('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;
        });
    }
});

注意这是未经测试的。如果您可以提供HTML样本（例如jsfiddle），则可以更轻松地进行测试...

这里的效率：

使用input.selectclass应该比.selectclass更快，特别是在Internet Explorer
缓存选择器而不是重新使用它
使用this.value而不是创建新的jQuery实例
使用val的内置回调签名，而不是使用each手动循环。

Answer 2

因为他们都是同一个班级，你需要一个foreach吗？

$('.selectclass').change(function() {
$('.selectclass').val($(this).val())
}

Answer 3

$('.selectclass').change(function() {
  if ($(this).val() != '') {
    $('.selectclass:gt(' + $('.selectclass').index(this) + ')').not(':empty').val($(this).val())
  }
});

Answer 4

您可以使用nextAll()来匹配树下的下一个同级<select>元素：

$(".selectclass").change(function() {
    var origin = $(this);
    var value = origin.val();
    if (value !== "") {
        origin.nextAll(".selectclass").each(function() {
            var $this = $(this);
            if ($this.val() === "") {
                $this.val(value);
            }
        });
    }
});

使用jQuery进行高效的复制

4 个答案: