jQuery Chuyển đổi Chọn nút radio?

Question

Tôi đang cố gắng chuyển đổi các hộp được chọn thành các nút radio khi đang bay bằng cách sử dụng jquery và tôi không chắc chắn cách tốt nhất.

HTML mẫu:

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

Tôi muốn chuyển đổi nó ở tải trang sử dụng 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> 

Và nó cần phải được động vì thế nó sẽ lặp tự động cho mỗi hộp chọn và mỗi tùy chọn bên trong (vì các sản phẩm khác nhau có các tùy chọn khác nhau)

Tôi đang cố gắng tìm ra cách tốt nhất. Hoặc là để có được một mảng đa chiều của tất cả các giá trị đầu tiên và sau đó xây dựng các nút radio .. hoặc hoán đổi chúng một lần tại một vòng lặp. Hiện đang cố gắng trước đây, nhưng tôi nghĩ rằng tôi có thể bị đánh lừa quá mức:

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

Có ai đã thử điều này hoặc có một số cách bí mật/dễ dàng hơn để làm điều đó mà tôi đang thiếu không?

Answer 1

Tôi kết hợp với nhau và thử nghiệm nó trong một vài trình duyệt, tất cả dường như xử lý tốt. Nó sẽ lấy dữ liệu ra khỏi các phần tử <option> và tạo <input/><label/><br/> cho mỗi phần tử, sau đó xóa hộp chọn.

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

Answer 2

Bạn đang đi đúng hướng. Lặp lại và thu thập dữ liệu được chọn thành các biến và thực hiện càng ít cuộc gọi hoạt động DOM càng tốt (để có hiệu quả) để tạo đầu vào radio.