jQuery कनवर्ट करें रेडियो बटन का चयन करें?

Question

मैं 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> 

और यह तो यह प्रत्येक सलेक्ट बॉक्स और प्रत्येक के लिए पाश गतिशील होगा गतिशील होने की जरूरत है विकल्प (जैसे विभिन्न उत्पादों में अलग-अलग विकल्प हैं)

मैं सबसे अच्छा तरीका समझने की कोशिश कर रहा हूं। या तो पहले सभी मानों की एक बहुआयामी सरणी प्राप्त करने के लिए और फिर रेडियो बटन बनाएं .. या एक लूप में एक समय में उन्हें एक साथ स्वैप करें। वर्तमान में पूर्व का प्रयास कर रहा है, लेकिन मुझे लगता है कि मैं इसे overthinking जा सकता है:

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

किसी को भी इस की कोशिश की है या यह कर कि मैं याद कर रहा हूँ की कुछ गुप्त/आसान तरीका है?

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

Answer 2

आप सही रास्ते पर हैं। चयन करें और वैरिएबल में चयन डेटा एकत्र करें और रेडियो इनपुट बनाने के लिए यथासंभव कम से कम कुछ डोम ऑपरेशन कॉल करें (दक्षता के लिए)।