用選擇元素替換單選按鈕使用Javascript

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

我改變了一下你的代碼，使其更清晰和功能化。

1. 我爲了有一個靜態NodeList改變document.getElementsByName到document.querySelectorAll，否則你將不得不使用一個while因爲收藏反映當一個單選按鈕被刪除所做的更改。你也可以稍後刪除它們，但它會無緣無故地乘以for-loops。此外querySelectorAll('input[type="radio"]...只專注於單選按鈕，避免錯誤。
2. 我使用.nextSibling將標籤文本影響到option，並使用trim刪除無用的空白和換行符。
3. 我使用remove從DOM中刪除無線電和標籤。
4. 作爲一個附註，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>