jQuery将选择转换为单选按钮？答案

【问题标题】：jQuery Convert Select to Radio buttons?jQuery将选择转换为单选按钮？
【发布时间】：2011-01-03 00:14:30
【问题描述】：

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

示例 HTML：

  <form id="product">    
    <select name="data[123]">
      <option value="1">First</option>
      <option value="2">Second</option>
      ......
      <option value="n">xxxxxx</option>
    </select>
  </form>

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

<form id="product">
  <input type="radio" name="data[123]" value="1" />
  <label for="data[123]">First</label><br/>
  <input type="radio" name="data[123]" value="2" />
  <label for="data[123]">Second</label><br/>
  ......
  <input type="radio" name="data[123]" value="n" />
  <label for="data[123]">xxxxxx</label><br/>
</form>

而且它需要是动态的，所以它会为每个选择框和里面的每个选项动态循环（因为不同的产品有不同的选项）

我正在尝试找出最好的方法。要么首先获取所有值的多维数组，然后构建单选按钮..要么在循环中一次换出一个。目前正在尝试前者，但我想我可能想多了：

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

有没有人尝试过这个或有一些我想念的秘密/更简单的方法？

【问题讨论】：

标签： jquery select radio-button dropbox

【解决方案1】：

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

//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 = $('<input type="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(
          $("<label />").attr('for', $select.attr('name')).text($option.text())
        );
        // Insert a <br />:
        $select.before("<br/>");
    });
    $select.remove();
});

【讨论】：

谢谢，但标签点击不起作用替换两行 1：$radio.attr('name', $select.attr('name')).attr('id', $option.val()); **2.**$("<label />").attr('for', $option.attr('value')).text($option.text()) );
其实第二行应该换成这样$("<label>").attr('for',$radio.attr('id')).text($option.text()) );
经过一些小改动后，这个解决方案对我来说效果很好：$option.attr('selected') 必须是 $option.is(':selected')，因为我的下拉列表没有任何带有 selected 属性的选项（第一个是预先选择的。 ) 我还必须为单选按钮创建一个 ID，以便 for="" 可以工作。 $radio.attr('id', $select.attr('id') + '_' + $option.attr('value')); 一旦您的收音机拥有自己的唯一 ID，@Claudiu 的建议就会奏效。就我而言，他们还没有自己的 ID。

【解决方案2】：

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

【讨论】：