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

まず、選択要素を追加する必要があります。

私はボディを選んだので、あなたがこれに必要なコンテナの要素がわかりません。これは必要に応じて変更できます。

$('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でこれを書き換えることができます。