如何实现select字段值的英文后续字母展示？

原实现代码 #

原代码选择下拉选项后，直接展示对应data-value的内容：

JavaScript #

$('#myselect').on('change' , function() {
  var a = $('#result'); 
  select = $(this).val();  // 获取选项值
  selectValue=$(this).find(':selected').data("value");   
  a.find('.b').html(selectValue);
});

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<select id="myselect" style="" name="select[]" class="select">
         <option data-value="ABC">我的产品</option>
         <option data-value="BCD">我的第二款产品</option>
   </select>

   <div id="result">
   <span class="b"></span>
   </div>

需求说明 #

需要将data-value中的每个字母转换为英文字母表中的下一个字母后再显示：

• 选择第一个选项（data-value="ABC"）时，显示BCD
• 选择第二个选项（data-value="BCD"）时，显示CDE

遇到的问题 #

最初的转换方案中，当遇到字母Z或z时，会被转换成]或}（因ASCII码中Z的下一个字符是]），不符合需求。

修正后的可行代码 #

以下代码处理了Z/z的边界情况，将Z转为A、z转为a，其他字母正常向后偏移一位：

JavaScript #

$('#myselect').on('change', function() {
  let result = [...$(this).find('option:checked').data('value')].map(
    (letter) => {
      if (letter == "z") {
          return "a";
        } else if (letter == "Z") {
          return "A";
        } else {
          return String.fromCharCode(letter.charCodeAt(0) + 1);
        }
    }).join('');
    
  $('#result .b').text(result)
});

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<select id="myselect" style="" name="select[]" class="select">
         <option data-value="ABC">我的产品</option>
         <option data-value="XYZ">我的第二款产品</option>
   </select>

   <div id="result">
   <span class="b"></span>
   </div>

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