Question

我有一个包含一些链接的td。

我想将这些链接转换为下拉选项（链接加载新页面或在页面上进行进一步更改）

＆＃13;

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

＆＃13;

我想在td内创建一个下拉列表。

我是如何使用Javascript或JQuery（＆lt; 2.0）

来实现这一目标的

Answer 1

您可以遍历a中的所有td标记，并为相应的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>

使用JS / JQuery从链接列表创建下拉列表

2 个答案: