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>

ويحتاج إلى أن تكون ديناميكية بحيث ستكون حلقة ديناميكيا لكل مربع حدد كل خيار من الداخل (كمنتجات مختلفة لها خيارات مختلفة)

أحاول معرفة أفضل طريقة. إما للحصول على مجموعة متعددة الأبعاد من جميع القيم أولا ثم إنشاء أزرار الراديو .. أو قم بتبديلها واحدا في وقت واحد في حلقة. حاليا محاولة السابق، لكنني أعتقد أنني قد تكون مهتم بها:

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

أنت على المسار الصحيح. قم بتكرار وجمع البيانات المحددة في متغيرات وإجراء مكالمات عملية دوم عددا ممكنا (للكفاءة) لإنشاء مدخلات الراديو.