Question

我有一小段代码可以在DOM上克隆一组表单元素。然后可以通过单击按钮插入这些按钮，该按钮克隆克隆的元素并附加它们。我注意到，对于<select>元素，尽管在克隆时重置了原始元素的值，但仍保留原始元素的值。

这是一个简化的例子：

$( function() {

  var $cl1 = $( '.example' ).filter( ':first' ).clone().val( '' ),
      $cl2 = $cl1.clone();
      
  $( 'body' ).append( $cl1, $cl2 );

} );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select class="example">
  <option value="">Please Select</option>
  <option value="1">Option 1</option>
  <option value="2" selected>Option 2</option>
  <option value="3">Option 3</option>
</select>

正如你所看到的，第二个克隆（第三个选择）具有原始元素的值，尽管它是第一个克隆的克隆，它没有任何值。

这是一个错误还是我误解了什么？

Answer 1

似乎与val()有关，因为设置者并未真正删除selected上的<option>属性。由于您没有在第二个设置值属性，因此浏览器使用selected来设置默认值

尝试

＆＃13;

$( function() {

  var $cl1 = $( '.example:first' ).clone();
      $cl1.find(':selected').removeAttr('selected');
      $cl2 = $cl1.clone();
      
  $( 'body' ).append( $cl1, $cl2 );

} );

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select class="example">
  <option value="">Please Select</option>
  <option value="1">Option 1</option>
  <option value="2" selected>Option 2</option>
  <option value="3">Option 3</option>
</select>

＆＃13;

Answer 2

此行为似乎直接来自Javascript＆n; value属性：

＆＃13;

var a = $('.test').clone();
console.log($('option[selected]',a).text()); //2
console.log($('option:selected',a).text());  //2
console.log(a[0].value);                     //2

a[0].value = '';
console.log($('option[selected]',a).text()); //2
console.log($('option:selected',a).text());  //Empty
console.log(a[0].value);                     //''

var b = a.clone();
console.log($('option[selected]',b).text()); //2
console.log($('option:selected',b).text());  //2
console.log(b[0].value);                     //2

$('body').append(a,b);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="test" class="test">
  <option value="">Empty</option>
  <option value="1">1</option>
  <option value="2" selected>2</option>
  <option value="3">3</option>
</select>

＆＃13;

如您所见，更改节点中的value属性不会影响selected HTML属性。 JQuery :selected选择正确的。

克隆克隆选择（重置值问题）

2 个答案: