javascript - 有什么方法可以将单选按钮列表动态更改为选择下拉列表吗？

Question

我正在尝试找到一种解决动态创建表单的方法，该表单出于某种原因不提供选择列表的选项，仅提供单选和检查输入。我无法进入并更改代码，所以我很好奇是否有办法使用 jquery 将单选按钮列表转换为选择下拉列表？

例如，如果我有以下代码:

<form>
   <div class="col-lg-5">     
      <p class="bullet"><b><font class="required" size="3" color="FF0000">*     </font></b></p>
      <p class="inputLabel">First Name:</p>
      <input type="text" size="25" name="Text1" value="">
   </div>
   <div class="col-lg-5">
      <input type="radio" name="gender" value="male">Male<br>
      <input type="radio" name="gender" value="female">Female
   </div>
   <div class="col-lg-10"><p>Current Employer / Facility:</p>
      <input type="text" size="25" name="Text9" value="">
   </div>
</form>

有没有办法将其更改为:

<form>
    <div class="col-lg-5">     
      <p class="bullet"><b><font class="required" size="3" color="FF0000">*     </font></b></p>
      <p class="inputLabel">First Name:</p>
      <input type="text" size="25" name="Text1" value="">
   </div>
    <select name="gender">
       <option value ="male">Male</option>
       <option value ="female">Female</option>
    </select>
   <div class="col-lg-10"><p>Current Employer / Facility:</p>
      <input type="text" size="25" name="Text9" value="">
   </div>
</form>

Answer 1

这是一种方法:

var sel = $('<select name="gender">').append(function () {
    var opts='';
    $('input[name="gender"]').each(function () {
        opts += '<option value ="' + this.value + '">' + this.value.charAt(0).toUpperCase() + this.value.slice(1) + '</option>';
    })
    return opts;
});
$('form div.col-lg-5:eq(1)').empty().append(sel);

<强> jsFiddle example