使用Javascript将单选按钮替换为select元素

我需要动态脚本检测单选按钮的名称，并替换为选择元素

这些单选按钮可以位于DOM中的任何位置。我需要区分使用名称，并将其替换为相关的选择框

例如输入：

<tr>
    <td>
        Car Type
    </td>
    <td>
        <input type="radio" name="Type"> Old
        <input type="radio" name="Type"> New
    </td>
</tr>

车型
古老的
新的

所需输出：

<tr>
    <td>
        Car Type
    </td>
    <td>
        <select name="Type">
            <option value="Old">Old</option>
            <option value="New">New</option>
        </select>
    </td>
</tr>

车型
古老的
新的

我尝试了一些东西，但没有成功（我的剧本）

//删除所有收音机
var radios=document.getElementsByName（名称）；
对于（变量i=0；i

---

我对您的代码做了一些修改，使其更清晰、更实用

我将

document.getElementsByName

更改为

document.querySelectorAll

，以获得静态，否则您将不得不在

期间使用
，因为集合将反映删除单选按钮时所做的更改。您也可以稍后删除它们，但对于循环而言，它将毫无理由地相乘。此外，
querySelectorAll（'input[type=“radio”]…
只关注单选按钮，避免出现错误

我使用标签文本将其影响到

选项

，并用于删除无用的空白和换行符

我曾经从DOM中删除收音机和标签

作为旁注，它们意味着有一个值。你不应该依赖于标签IMO

函数replaceRadiosBySelect（名称）{
var selectList=document.createElement（'select'），
radios=document.querySelectorAll（'input[type=“radio”][name=“”+name+”）；
如果（radios.length>0）{
选择list.name=name；
收音机[0].parentNode.appendChild（选择列表）；
对于（变量i=0；i

车型
古老的
新的

那么问题出在哪里？您的代码可以工作。@dfsq是的，它可能有，也可能没有。没关系。我的任务是动态转换UI元素，因此提交数据与此问题无关。@dfsq否它不工作。'Remove element'没有删除单选按钮的标签（'Old'，'New'））。页面已刷新，更改未保留。页面重新加载，因为您使用按钮类型提交。使用类型=按钮。它几乎可以正常工作，替换功能无法正常工作。@dfsq ya我尝试过，感谢按钮错误解决方案，但单选按钮未完全删除。请建议解决方案

//removing all radio
  var radios = document.getElementsByName(name);
  for (var i = 0; i < radios.length; i++) {
    radios[i].parentNode.removeChild(radios[i]);
  }
  //replaceing wih select
  var selectList = document.createElement("select");
  selectList.name = name;
  radios[0].parentNode.appendChild(selectList);
  //Create and append the options
  for (var i = 0; i < data.length; i++) {
    var option = document.createElement("option");
    option.value = data[i];
    option.text = data[i];
    selectList.appendChild(option);
  }