jQuery将选择转换为单选按钮? [英] 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将选择转换为单选按钮?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!