您可以使用jquery 动态更改输入字段的类型吗？ [关闭]

Question

背景信息

我正在尝试重构一些 php / html 代码。我有一个充满各种行的表......每一行都有几列，包括一个图像图标。

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

1. 创建一个下拉列表来代替标签。
2. 从页面上的现有下拉列表中获取此下拉列表的值/列表。 （称为“location_id”）。

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>

所以特别是我想用页面上其他位置存在的下拉列表替换具有“location1”作为值的下拉列表。并且由于列表中有“location1”，我希望“located1”成为选定的值。

这是我目前的 javascript 代码：

Javascript 代码

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

});

问题

此代码的工作原理是，我最终在行中得到了一个新的下拉列表，但我不确定如何选择/突出显示下拉列表中值为“21581”的项目。或者，我也可以使用“location_name”值匹配项目。
我现在面临的挑战是唯一标识要循环的正确框，因为从 clone() 命令创建的新框与现有框具有相同的名称。

编辑 1

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

$(document).ready(function () {
        $(".edit").click(function(e){
                alert(this.id);
                var menu = $( "#location_id" ).clone();
                $(e.currentTarget).replaceWith(menu);
                menu.find('option').each(function(i, opt) {
                // when the value is found, set the 'selected' attribute
                        if($(opt).attr('value') == this.id) $(opt).attr('selected', 'selected');
                 });
        });

});

第一个警报语句正确显示 - 它显示第一个 td 中的值（例如 21581）。出现下拉菜单并替换图像...但我需要它来替换 location_name 值。

Answer 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');
       });
    });