0

我正在使用第三方软件，无权编辑页面上的代码，但我可以添加 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>

4

2 回答 2

1

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

我不确定你需要这个容器元素，所以我选择了 body。您可以根据需要更改此设置。

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

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

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

然后你循环遍历它们，取出你需要的东西并将它们附加到选择元素。

$.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 重写它。

于 2016-10-26T17:44:52.420 回答
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. select使用循环从数组构建下拉列表for，例如这个答案。

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

于 2016-10-26T17:23:03.750 回答