javascript - 如何使用 jquery 将下拉菜单转换为单选按钮

Question

我有一个下拉选择，我想将其更改为单选按钮:

HTML

<select id="designation" title="Designation" name="designation">
    <option value="">Choose Option..</option>
    <option value="1">Educator</option>
    <option value="2">Student Subscriber</option>
    <option value="3">Adult Subscriber</option>
</select>
<div id="r"></div>

我尝试添加此代码，但只显示没有标签的按钮，我该如何添加标签？

Jquery

jQuery("#designation option").each(function(i, e) {
    jQuery("<input type='radio' name='r' />")
        .attr("value", jQuery(this).val())
        .attr("checked", i == 0)
        .click(function () {
            jQuery("#designation").val(jQuery(this).val());
        })
        .appendTo("#r");
});

Answer 1

你必须单独创建它，

jQuery("#designation option").each(function(i, e) {
  (jQuery("<input type='radio' name='r' />")
    .attr("value", jQuery(this).val())
    .attr("checked", i == 0)
    .click(function() {
      jQuery("#designation").val(jQuery(this).val());
    }).add($("<label>"+ this.textContent +"</label>")))
    .appendTo("#r");
});

DEMO