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

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

来源

2016-10-26 C. George

你可以使用jQuery吗？ –

我不会写一个完整的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];

使用for环，如this答案从阵列构建select下拉。
将您的html附加到DOM并删除复选框列表，或使用replaceChild方法。

来源

2016-10-26 17:23:03

您需要做的第一件事就是添加一个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中重写。

来源

2016-10-26 17:44:52

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

回答

相关问题