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

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'); 

Answer 2

工作流程：

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.