Как изменить список с помощью флажков в раскрывающемся списке с помощью 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. Вы можете ссылаться на 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]; 
   

2. Построить select ниспадающее меню из массива, используя for петли, такие как this ответа.

3. Добавить свой html в DOM и удалить список флажков или использовать метод replaceChild.

Answer 2

Первое, что вам нужно сделать - это добавить элемент выбора.

Я не уверен, какой элемент контейнера вам нужен, поэтому я выбрал тело. Вы можете изменить это по мере необходимости.

$('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, если это необходимо.