如何将原有checkbox/radio选择组件替换为select下拉选择并适配原有jQuery逻辑

完全匹配原有选项的展示文本、属性值对应关系，替换原radio单选组为原生select下拉组件：

<select class="koleso" name="koleso">
  <!-- 对应原默认选中的第一个radio项 -->
  <option value="4" data-koleso="0" selected>ALL</option>
  <option value="3" data-koleso="1">3</option>
  <option value="2" data-koleso="2">2</option>
  <option value="1" data-koleso="3">1</option>
  <option value="0" data-koleso="4">NO</option>
</select>

完全对齐原有规则，替换原label点击事件为select变更监听：

// 兜底设置默认选中第一个选项，匹配原逻辑的"默认选中name为koleso的第一个输入项"规则
$("select.koleso option:first").prop("selected", true);
// 沿用原有的事件委托绑定方式，兼容动态插入的组件场景
$('body').on('change', 'select.koleso', function (e) {
  // 读取当前选中项的data-koleso属性值，赋值给全局koleso变量
  koleso = $(this).find('option:selected').data('koleso');
  // 调用原有计算方法完成业务逻辑
  calc();
});

• 未改动原有变量赋值、calc()调用的核心逻辑，原有计算链路完全不受影响
• 所有选项的data-koleso映射关系和原radio组完全一致，不会出现计算值偏差
• 移除了原radio+label的冗余点选结构，交互从点选标签切换为标准下拉选择

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