如何使用Javascript将带有复选框的列表更改为下拉列表?

Question

我使用的是第三方软件，无法编辑页面上的代码，但我可以添加Javascript来修改内容。我正在寻找一个解决方案，可以帮助改变复选框项目的这个列表下拉列表。我以前很少有使用Javascript的经验。提前感谢!

<tr>
    <td class="BBFieldCaption DonationFieldCaption">
        <label for="PC4519_214DIV" id="PC4519_lblLgnCtl214">Time Frame of Deduction:</label>
    </td>
    <td id="PC4519_ParentControl214" class="taLeft">
        <DIV id="PC4519_214DIV" class="BBFormChecklistContainer LoginFormCheckListContainer">
            <table id="PC4519_214" class="BBFormChecklist LoginFormCheckList">
                <tr>
                    <td>
                        <input id="PC4519_214_0" type="checkbox" name="PC4519$214$0" value="PD Til Further Notice" />
                            <label for="PC4519_214_0">PD Til Further Notice
                            </label>
                    </td>
               </tr>
               <tr>
                   <td>
                       <input id="PC4519_214_1" type="checkbox" name="PC4519$214$1" value="Seahawk 3 Year Pledge" />
                           <label for="PC4519_214_1">Seahawk 3 Year Pledge
                           </label>
                   </td>
               </tr>
               <tr>
                    ... etc ...
               </tr>
       </table>
    </div>
  </td>
</tr>

Answer 1

我不会为你写一个完整的js函数，但我会指出一些应该有所帮助的想法:

1. 您可以引用此答案来获取td元素的值。然后，您可以使用这些值来构建相关选项的数组。

   t = document.getElementById("table"), // This have to be the ID of your table, not the tag
   d = t.getElementsByTagName("tr")[0],
   r = d.getElementsByTagName("td")[0];
   

2. 使用for循环从数组构建select下拉列表，如以下答案

3. 将html附加到DOM并删除复选框列表，或使用replaceChild方法

Answer 2

首先要做的是添加一个select元素。

我不确定你需要什么容器元素，所以我选择了身体。你可以根据需要修改。

$('body').append('<select id="mySelc"></select>'); 

然后收集所有复选框输入元素。

var inpts = $('#PC4519_214').find('input[type="checkbox"]');

然后循环遍历它们，取出需要的内容并将它们附加到select元素。

$.each(inpts, function(ii,val){
    var optId = $(val).attr('id'), //pull out the id
        optVal = $(val).attr('value'), //pull out the value
        optData = $(val).attr('name'); // pull out the name. will be used as a data attribute.
    //append to the select element.
    $('#mySelc').append('<option id="'+optId+'" data="'+optData+'" value="'+optVal+'">'+optVal+'</option>');
});

我假设你正在使用jQuery，但我可以重写在纯JavaScript如果需要。