如何在Select选项中保留修改后的data属性值？

这个问题我之前也碰到过，核心原因是jQuery的data()方法和DOM上的data-*属性并不是实时同步的，我给你拆解下具体原因和解决方案：

问题根源 #

jQuery的data()方法会把读取到的data-*属性值存在元素的内部缓存里，第一次读取后就不会再主动去读取DOM上的data-*属性了。你用attr('data-x', 999)修改了DOM上的属性，但后续用data('x')获取时，拿的还是缓存里的旧值，这就导致修改后的值无法留存。

解决方案 #

有两种常用的处理方式，你可以根据需求选择：

方式一：直接用jQuery的data()方法修改（推荐） #

这种方式会直接更新jQuery内部的缓存数据，后续用data('x')就能获取到最新值，操作更高效：

// 修改change事件，用$(this)定位当前触发事件的select更准确
$('.sela').change(function(){
  var $selected = $(this).find(':selected');
  var uname = $selected.data('x');
  $('#inptest').val(uname);
}); 

$('#btn').click(function(){
  var $selected = $('.sela:visible').find(':selected');
  // 直接用data()设置值，同步内部缓存
  $selected.data('x', 999);
  var a = $selected.data('x');
  $('#inptest').val(a);
}); 

注意：这种方式不会更新DOM上的data-x属性，如果你不需要在DOM里看到修改后的属性值，用这种方法最方便。

方式二：同时修改DOM属性和jQuery缓存 #

如果需要DOM上的data-x属性也同步更新，可以在修改attr后手动同步缓存：

$('.sela').change(function(){
  var $selected = $(this).find(':selected');
  var uname = $selected.data('x'); // 或者用attr('data-x')，保持统一即可
  $('#inptest').val(uname);
}); 

$('#btn').click(function(){
  var $selected = $('.sela:visible').find(':selected');
  // 修改DOM属性
  $selected.attr('data-x', 999);
  // 同步jQuery内部缓存
  $selected.data('x', 999);
  var a = $selected.data('x');
  $('#inptest').val(a);
}); 

或者你也可以先清除缓存，让下次data()读取时重新从DOM属性获取：

$('#btn').click(function(){
  var $selected = $('.sela:visible').find(':selected');
  $selected.attr('data-x', 999);
  // 清除缓存
  $selected.removeData('x');
  // 重新读取DOM属性到缓存
  var a = $selected.data('x');
  $('#inptest').val(a);
}); 

完整可测试代码 #

把所有代码整合起来，你可以直接运行测试：

<input type="text" id="inptest">
<button id="btn">修改data-x为999</button>
<select class='sela'>
  <option value='lorem1' data-x='left'>选项1</option>
  <option value='lorem2' data-x='right'>选项2</option>
</select>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$('.sela').change(function(){
  var $selected = $(this).find(':selected');
  var uname = $selected.data('x');
  $('#inptest').val(uname);
}); 

$('#btn').click(function(){
  var $selected = $('.sela:visible').find(':selected');
  $selected.data('x', 999);
  var a = $selected.data('x');
  $('#inptest').val(a);
}); 
</script>
<style>
#btn{ cursor:pointer; } 
</style>

内容的提问来源于stack exchange，提问作者qadenza