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函数，但我会指出一些应该有用的想法：

您可以参考this回答来获取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];

使用select循环从数组中构建for下拉列表，例如this answer。
将您的html附加到DOM并删除复选框列表，或使用replaceChild方法。

Answer 2

您需要做的第一件事就是添加一个选择元素。

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

$('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中重写它。

如何使用Javascript将包含复选框的列表更改为下拉列表？

2 个答案: