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. 는 this 않음 같이 for 루프를 사용하는 배열에서 select 드롭 빌드.

3. DOM에 HTML을 추가하고 체크 박스 목록을 제거하거나 replaceChild 메서드를 사용하십시오.

Answer 2

첫 번째로해야 할 일은 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를 사용한다고 가정하지만, 필요하다면 이것을 순수한 자바 스크립트로 다시 작성할 수있다.