9

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>

また、動的である必要があるため、各選択ボックスと内部の各オプションに対して動的にループします (製品ごとに異なるオプションがあるため)。

最善の方法を見つけようとしています。最初にすべての値の多次元配列を取得してからラジオ ボタンを作成するか、ループで一度に 1 つずつ交換します。現在、前者を試みていますが、私はそれを考えすぎているのではないかと思います:

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

誰かがこれを試したことがありますか、それとも私が見逃している秘密/簡単な方法がありますか?

4

2 に答える 2

28

これをまとめて、いくつかのブラウザでテストしましたが、すべてうまく処理されているようです。要素からデータを取得し、それぞれの<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();
});
于 2010-01-08T17:24:58.320 に答える
1

あなたは正しい軌道に乗っています。反復して選択データを変数に収集し、ラジオ入力を作成するために (効率のために) 可能な限り少ない DOM 操作呼び出しを行います。

于 2010-01-08T17:21:31.557 に答える