JS/JQueryを使用してリンクのリストからドロップダウンを作成します。

Question

私はいくつかのリンクを含むtdを持っています。

私は内部のドロップダウンを作成したいと思います

<td class="listActions"> 
 
    <a href="/edit">edit</a> 
 
    <a href="/eraseRecordOnThisPage">erase</a> 
 
    <a href="/payments">Payment</a> 
 
    <a href="/cancel">Cancel</a> 
 
</td>

（リンクは新しいページをロードするか、ページ上でさらに変更をキャリーアウト）、ドロップダウンオプションにこれらのリンクを変換したいですtd。

私はJavascriptやjQueryの（< 2.0）

Answer 1

を使用すると、あなたはtd内のすべてのaタグを反復処理し、option要素に対応するためのHTML文字列を作成することができることをやって行くだろうか任意のアイデア。次に、これらのオプションをselectタグで囲み、問題のtdに追加することができます。

<td class="listActions"> 
    <a href="/edit">edit</a> 
    <a href="/eraseRecordOnThisPage">erase</a> 
    <a href="/payments">Payment</a> 
    <a href="/cancel">Cancel</a> 
</td> 

<script> 
    $(".listActions").each(function(index){ 
     var htmlString = '<select>'; 

     $(this).find("a").each(function(){ 
      htmlString += '<option value="'+$(this).attr("href")+'">'+$(this).text()+'</option>'; 
     });//each 

     htmlString += '</select>'; 

     $(this).append(htmlString); 
    });//each 

    $('.listActions').on('change', function() { 
    window.location = $(this).val(); 
    }); 
</script> 

Answer 2

のjQueryを使用して、このような何か（これは選択されたリンクを開きます）

$('#selectURL').on('change', function() { 
 
    window.location = $(this).val(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<td class="listActions"> 
 
    <select id="selectURL"> 
 
    <option value="" selected="">Please Select</option> 
 
    <option value="/eraseRecordOnThisPage">eraseRecordOnThisPage</option> 
 
    <option value="/payments">payments</option> 
 
    <option value="/cancel">cancel</option> 
 
    </select> 
 

 

 
</td>