Question

我需要动态脚本，它按名称检测单选按钮，并用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>

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

//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);
  }

Plunker full example

Answer 1

我改变了一下你的代码，使其更清晰，更实用。

我将document.getElementsByName更改为document.querySelectorAll以获得静态 NodeList，否则您必须使用while将反映删除单选按钮时所做的更改。您也可以稍后删除它们，但它会毫无理由地乘以for-loops。此外querySelectorAll('input[type="radio"]...只关注单选按钮，避免错误。
我使用.nextSibling获取标签文字，将其影响到option并使用trim删除无用的空格和换行符。
我使用remove删除了DOM中的无线电和标签。
作为旁注，radio buttons意味着有价值。你不应该依赖IMO标签。

function replaceRadiosBySelect(name) {
  var selectList = document.createElement('select'),
      radios     = document.querySelectorAll('input[type="radio"][name="' + name + '"]');
  
  if (radios.length > 0) {
    selectList.name = name;
    radios[0].parentNode.appendChild(selectList);

    for (var i = 0; i < radios.length; i++) {
      var label  = radios[i].nextSibling,
          option = document.createElement('option');

      option.value = option.text = label.data.trim();
      selectList.appendChild(option);

      radios[i].remove();
      label.remove();
    }
  }
}

replaceRadiosBySelect('Type');

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

使用Javascript将select单元替换为select元素

1 个答案: