jQuery Convert Выберите в радио кнопки?
Я пытаюсь преобразовать поля выбора в переключатели на лету, используя 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();
});
Кто-нибудь пробовал это или есть какой-то секретный / более простой способ сделать это, что я скучаю?
2 ответа
Я собрал это вместе и протестировал в нескольких браузерах, все, кажется, хорошо с этим справляются. Он вытащит данные из элементов и создаст
//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();
});
Вы на правильном пути. Итерируйте и собирайте данные выбора в переменные и делайте как можно меньше вызовов операций DOM (для эффективности) для создания радиовходов.