Javascript 可以使用jquery动态更改输入字段的类型吗？

背景信息

我正在尝试重构一些php/html代码。我有一张满是各行的桌子。。。每行有几列，包括一个图像图标

我想写一些逻辑，这样当有人点击这个图像时，系统会做两件事：

创建一个下拉列表来代替标记

从页面上现有的下拉列表获取此下拉列表的值/列表。（称为“位置标识”）

HTML代码

  <tr>
    <td id="21581">
       <img src="?module=chrome&amp;uri=pix/tango-user-trash-16x16-gray.png" title="1rack" height="16" width="16" border="0">
     </td>
     <td id="location_name">location1</td> 
     <td>Location1-ABB-01</td>
     <td><input tabindex="1" name="submit" class="edit" src="?module=chrome&amp;uri=pix/pencil-icon.png" id="21581" title="Edit row" type="image" border="0"></td>
    <td><a href="index.php?page=row&amp;row_id=21586">Row Location1-ABB-01</a></td>
   </tr>

$(document).ready(function () {
        $(".edit").click(function(){
                alert(this.id);
                $( "#location_id" ).clone().appendTo("#"+this.id );
        });

});

问题

这段代码的工作原理是，我在行中有一个新的下拉列表，但我不确定如何在下拉列表中选择/突出显示值为“21581”的项。或者，我也可以使用“location\u name”值匹配项目。
我现在面临的挑战是唯一地确定要循环的正确框，因为从clone（）命令创建的新框与现有框具有相同的名称

编辑1

下面是代码现在的样子 （顺便说一句，我不能更改我的jquery版本，因为这是其他人的代码…所以我不能使用“on”指令。）

---

第一个alert语句显示正确-它显示第一个td中的值（例如21581）。此时会出现下拉列表并替换图像。。。但是我需要它来替换location\u name值。

未测试，但这应该可以做到（基本上）

根据您的编辑，尝试以下操作：

$('.edit').on('click', function(e) {
       // make your clone
       var menu = $("#location_id").clone();
       // empty the td element then append the menu
       $("#location_name").empty().append(menu);
       // loop through options looking for value 21581
       menu.find('option').each(function(i, opt) {
           // when the value is found, set the 'selected' attribute
           if($(opt).attr('value') == '21581') $(opt).attr('selected', 'selected');
       });
    });

---

，@DontVoteMeDown很酷。我不知道那件事。但这会将select添加到输入中，而不是替换它，对吗？我需要替换它，然后你可以输入。@DontVoteMeDown，但是如果我想在新克隆的文本中“找到”输入的文本值，我仍然需要循环它，对吗？克隆正在工作。。。但新创建的列表与现有列表同名。。。所以我不知道如何循环使用新创建的一个稍微有点错误的类型

find（'option'）

Oops-谢谢各位。经过编辑。@Jbird，我试着澄清一下我的问题。请看我的编辑。基本上不替换图像，我如何替换另一个id=“location\u name”@dot的值第二个示例如何？通过将克隆分配给变量“menu”创建对象引用，这样就不必担心jquery同时选择两个菜单了。@Jbird，我正在尝试应用第二个示例。但这对我不起作用。请参见编辑1

$('input[name="submit"]').on('click', function(e) {
        // create a new select menu
        var menu = $(document.createElement('select'));
        // replace the button that was clicked with the menu
        $(e.currentTarget).replaceWith(menu);
        // add each option from the select menu that contains your options to the newly created menu
        $('select[name="options-target"]').find('option').each(function(i, opt) {
            menu.append($(opt));
        });
});

$('.edit').on('click', function(e) {
       // make your clone
       var menu = $("#location_id").clone();
       // empty the td element then append the menu
       $("#location_name").empty().append(menu);
       // loop through options looking for value 21581
       menu.find('option').each(function(i, opt) {
           // when the value is found, set the 'selected' attribute
           if($(opt).attr('value') == '21581') $(opt).attr('selected', 'selected');
       });
    });