Javascript/Jquery将选择列表更改为单选按钮

我有一个选项选择列表，我想更改为可单击单选按钮

以下是我的选择列表：

<select id="VariationGroup44" class="select" name="dlVariationGroup44">
<option value="Select Color"> Select Color </option>
<option selected="selected" value="1"> Black </option>
<option value="2"> Red </option>
<option value="3"> Green </option>
<option value="4"> Blue </option>
</select>

选择颜色
黑色
红色
绿色
蓝色

我已经成功地将其转换为UL，但选项不再可点击，这就是为什么我认为单选按钮会工作得更好的原因。欢迎所有建议，非常感谢

函数替换选择（选择）{
function replaceSelect(select) {
  var opts = $(select).find('option');
  var name = $(select).attr('name');
  var id = $(select).attr('id');
  var list = [];
  opts.each(function() {
    list.push(
      '<li>'+
        '<label>'+
          '<input type="radio" name="'+ name +'">'+ 
          $(this).text()
        '</label>'+
      '</li>'
    );
  });
  $(select).replaceWith('<ul id="'+ id +'">'+ list.join('') +'</ul>');
}

// Usage
replaceSelect('#VariationGroup44');

var opts=$（选择）.find（'option'）；
变量名称=$（选择）.attr（'name'）；
var id=$（select.attr（'id'）；
var列表=[]；
opts.each（函数（）{
list.push(
“
”+
''+
''+ 
$（this.text（））
''+
“
”
);
});
$（选择）.replaceWith（'
”+列表.join（''）+'
）；
}
//用法
替换选择（“#变量组44”）；

工作流：

$('#VariationGroup44 option').each(function(i,obj){
  $('<li><input type="radio" name="chkOpt'+i+'" value="'+$(obj).val()+'"/><label for="chkOpt'+i+'"> '+$(this).text()+'</label></li>').appendTo('ul');
});

迭代这些选项

拿你需要的东西

建立新的复选框

将它们附加到元素

代码：

$('#VariationGroup44 option').each(function(i,obj){
  $('<li><input type="radio" name="chkOpt'+i+'" value="'+$(obj).val()+'"/><label for="chkOpt'+i+'"> '+$(this).text()+'</label></li>').appendTo('ul');
});

$（'VariationGroup44 option'）。每个（函数（i，obj）{
$（“
”+$（this.text（）+”
）.appendTo（'ul'）；
});