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

Question

我有一个选项列表，我想将其更改为可单击的单选按钮。

这是我的选择列表:

<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，但选项不再可单击，这就是为什么我认为单选按钮会更好用。欢迎并非常感谢所有建议!

Answer 1

工作流程:

1. 迭代选项。
2. 拿走你需要的
3. 构建新的复选框。
4. 将它们附加到元素。

代码:

$('#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');
});

The working jsFiddle.