How can I change a list with checkboxes to a dropdown list using Javascript?

Question

I am using third-party software and don't have access to edit the code on the page, but I can add in Javascript to modify the content. I'm looking for a solution that can help change this list of checkbox items to a dropdown list. I have very little previous experience with Javascript. Thanks in advance!

<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>

score 1 · Answer 1 · edited May 23 '17 at 10:34

I won't write a full js function for you but I'll point out some ideas which should help:

You can reference this answer to get the values of your td elements. You can then work with those values to build an array of relevant options.

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];

Build a select dropdown from an array using a for loop, such as this answer.
Append your html to the DOM and remove the list of checkboxes, or use the replaceChild method.

score 1 · Answer 2 · answered Oct 26 '16 at 17:44

The first thing you will need to to is to add a select element.

I am not sure what container element you need this in so I opted for the body. You can change this as needed.

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

Then you collect all of your checkbox input elements.

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

Then you loop through them pulling out what you need and appending them to the select element.

$.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>');
});

I assume you are using jQuery, but i can rewrite this in pure JavaScript if needed.

How can I change a list with checkboxes to a dropdown list using Javascript?

2 Answers2