jQuery Convert选择单选按钮？ [英] jQuery Convert Select to Radio buttons?

问题描述

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

I am trying to convert select boxes to radio buttons on the fly using jquery, and I'm not sure the best way.

示例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将其转换为：

I want to convert it at page load using jquery to:

<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>

而且它必须是动态的，因此它将为每个选择框和其中的每个选项动态循环（如不同的产品有不同的选择）

And it needs to be dynamic so it will loop dynamically for each select box and each option inside (as different products have different options)

我正在尝试找出最佳方法。首先获取所有值的多维数组，然后构建单选按钮..或一次循环将它们换出一个。当前正在尝试使用前者，但我想我可能会对此加以考虑：

I'm trying to figure the best way. Either to get a multidimensional array of all the values first and then build the radio buttons.. or swap them out one at a time in a loop. Currently attempting the former, but I think I may be overthinking it:

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

有没有人尝试过这种方法，或者有某种我想念的秘密/简便方法？

Has anyone tried this or have some secret/easier way of doing it that I'm missing?

推荐答案

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

I put this together, and tested it in a few browsers, all seem to handle it well. It will take the data out of the <option> elements and create the <input/><label/><br/> for each one, then remove the select box.

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

这篇关于jQuery Convert选择单选按钮？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！