克隆已克隆的select元素（重置值异常问题）

AI 小北

2026-5-15

jQuery克隆select元素时选中状态重置异常的原因与解决方案

这不是Bug，是你对jQuery克隆方法和DOM元素状态的理解有点小偏差~

问题根源

当你执行$('.example').filter(':first').clone()时，克隆出来的$cl1会完整复制原始select元素的HTML结构——包括原始option上的selected属性（也就是那个默认选中的Option 2）。

你调用.val('')只是修改了$cl1的当前DOM选中状态（让它显示“Please Select”），但并没有移除原始option上的selected属性。当你再次克隆$cl1时，jQuery默认会复制它的HTML属性（包括那个没被移除的selected），所以新的$cl2会根据这个初始属性自动选中Option 2，而不是继承$cl1的当前显示状态。

你可以用这段代码验证这个点：

console.log($cl1.find('option[selected]').val()); // 会输出"2"，说明selected属性还在

解决方案

有两种简单的方式可以解决这个问题：

方案1：重置值时同时移除原始selected属性

在给$cl1设置空值后，手动移除option上的selected属性，这样后续克隆时就不会继承初始选中状态了：

$( function() {
  var $original = $( '.example' ).filter( ':first' );
  var $cl1 = $original.clone();
  // 重置值 + 移除原始的selected属性
  $cl1.val('').find('option[selected]').removeAttr('selected');
  var $cl2 = $cl1.clone();
  $( 'body' ).append( $cl1, $cl2 );
} );

方案2：每次克隆后都显式重置值

不管克隆自哪个元素，在克隆完成后都手动设置一次空值，确保当前DOM状态和初始属性一致：

$( function() {
  var $cl1 = $( '.example' ).filter( ':first' ).clone().val( '' );
  var $cl2 = $cl1.clone().val( '' ); // 克隆后再次重置值
  $( 'body' ).append( $cl1, $cl2 );
} );