javascript - 如何在选择选项上保留一次更改的数据值？

Question

$('.sela').change(function(){
  var obj = $('.sela:visible');
  var uname = obj.find(':selected').data('x');
  $('#inptest').val(uname);
})

$('#btn').click(function(){
  $('.sela:visible').find(':selected').attr('data-x', 999)
  var a = $('.sela:visible').find(':selected').attr('data-x')
  $('#inptest').val(a);
});

#btn{
  cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class='sela'>
<option value='lorem1' data-x='left'>ADMIN</option>
<option value='lorem2' data-x='right'>AUTHS</option>
</select>
<br><br>
<select class='sela'>
<option value='lorem3' data-x='up'>SKY</option>
<option value='lorem4' data-x='down'>EARTH</option>
</select>
<br><br>
<input type='text' id='inptest'value='323'>
<br><br>
<div id='btn'>BUTTON</div>

先把sela改成AUTHS。
inptest 变为 right
点击btn - sela选择选项data-x为999和inptest为999
现在将 sela 更改回 ADMIN 并再次更改为 AUTH。
我希望它保持 999 但它变成了 right。
如何在 sela 选项上保留一次更改的数据值？

Answer 1

保持一致，

要么使用 .attr('data-x')/.attr('data-x', newValue) 要么使用 .data('x ')/.data('x',newValue)

所以

$('.sela').change(function() {
  var obj = $('.sela:visible');
  var uname = obj.find(':selected').data('x');
  $('#inptest').val(uname);
})

$('#btn').click(function() {
  $('.sela:visible').find(':selected').data('x', 999)
  var a = $('.sela:visible').find(':selected').data('x')
  $('#inptest').val(a);
});

#btn {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class='sela'>
  <option value='lorem1' data-x='left'>ADMIN</option>
  <option value='lorem2' data-x='right'>AUTHS</option>
</select>
<br><br>
<select class='sela'>
  <option value='lorem3' data-x='up'>SKY</option>
  <option value='lorem4' data-x='down'>EARTH</option>
</select>
<br><br>
<input type='text' id='inptest' value='323'>
<br><br>
<div id='btn'>BUTTON</div>

或者

$('.sela').change(function(){
  var obj = $('.sela:visible');
  var uname = obj.find(':selected').attr('data-x');
  $('#inptest').val(uname);
})

$('#btn').click(function(){
  $('.sela:visible').find(':selected').attr('data-x', 999)
  var a = $('.sela:visible').find(':selected').attr('data-x')
  $('#inptest').val(a);
});

#btn{
  cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class='sela'>
<option value='lorem1' data-x='left'>ADMIN</option>
<option value='lorem2' data-x='right'>AUTHS</option>
</select>
<br><br>
<select class='sela'>
<option value='lorem3' data-x='up'>SKY</option>
<option value='lorem4' data-x='down'>EARTH</option>
</select>
<br><br>
<input type='text' id='inptest'value='323'>
<br><br>
<div id='btn'>BUTTON</div>