0

我有一个选择列表,我想将其更改为可单击的单选按钮。

这是我的选择列表:

<select id="VariationGroup44" class="select" name="dlVariationGroup44">
<option value="Select Color"> Select Color </option>
<option selected="selected" value="1"> Black </option>
<option value="2"> Red </option>
<option value="3"> Green </option>
<option value="4"> Blue </option>
</select>

我已成功将其转换为 UL,但选项不再可点击,这就是为什么我认为单选按钮会更好地工作。欢迎所有建议并非常感谢!

4

2 回答 2

2

工作流程:

  1. 迭代选项。
  2. 你要什么就拿
  3. 构建新的复选框。
  4. 将它们附加到元素。

编码:

$('#VariationGroup44 option').each(function(i,obj){
  $('<li><input type="radio" name="chkOpt'+i+'" value="'+$(obj).val()+'"/><label for="chkOpt'+i+'"> '+$(this).text()+'</label></li>').appendTo('ul');
});

工作的 jsFiddle。

于 2012-08-28T02:39:22.727 回答
0
function replaceSelect(select) {
  var opts = $(select).find('option');
  var name = $(select).attr('name');
  var id = $(select).attr('id');
  var list = [];
  opts.each(function() {
    list.push(
      '<li>'+
        '<label>'+
          '<input type="radio" name="'+ name +'">'+ 
          $(this).text()
        '</label>'+
      '</li>'
    );
  });
  $(select).replaceWith('<ul id="'+ id +'">'+ list.join('') +'</ul>');
}

// Usage
replaceSelect('#VariationGroup44');
于 2012-08-28T02:37:05.273 回答