jQuery转换选择单选按钮？

我正在尝试使用jquery将选择框转换为单选按钮，我不确定最好的方法。

示例HTML：

  First Second ...... xxxxxx   

我想在页面加载时使用jquery将其转换为：

 
  First
  Second
 ......  xxxxxx
  

它需要是动态的，因此它将动态循环每个选择框和内部的每个选项（因为不同的产品有不同的选项）

我想找到最好的方法。 要么首先得到所有值的多维数组，然后构建单选按钮..或者在循环中一次交换一个。 目前正在尝试前者，但我想我可能会过度思考它：

 $(document).ready(function(){ //Get Exising Select Options $('form#product select').each(function(i, select){ $(select[i]).find('option').each(function(j, option){ //alert($(option).text()); option[j] = []; option[j]['text'] = $(option).text(); option[j]['val'] = $(option).val(); }); }); //Remove Select box $('form#product select').remove(); }); 

有没有人试过这个或者有一些秘密/更简单的方法来做我错过的？

Answer 1

我把它放在一起，并在几个浏览器中进行测试，似乎都处理得很好。 它将从元素中取出数据并为每个元素创建
，然后删除选择框。

 //Get Exising Select Options $('form#product select').each(function(i, select){ var $select = $(select); $select.find('option').each(function(j, option){ var $option = $(option); // Create a radio: var $radio = $(''); // Set name and value: $radio.attr('name', $select.attr('name')).attr('value', $option.val()); // Set checked if the option was selected if ($option.attr('selected')) $radio.attr('checked', 'checked'); // Insert radio before select box: $select.before($radio); // Insert a label: $select.before( $("").attr('for', $select.attr('name')).text($option.text()) ); // Insert a 
: $select.before("
"); }); $select.remove(); }); 

Answer 2

你走在正确的轨道上。 迭代并将选择的数据收集到变量中，并尽可能少地进行DOM操作调用（以提高效率）以创建无线电输入。