Question

背景资料

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

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

创建一个下拉列表来代替标记。
从页面上的现有下拉列表中获取此下拉列表的值/列表。（被叫＆＃34; location_id＆＃34;）。

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>

具体而言，我想替换那个有＆＃34; location1＆＃34;作为具有下拉的值，存在于页面上的其他位置。因为这将有＆＃34; location1＆＃34;在列表中，我想要＆＃34;找到1＆＃34;成为选定的值。

这是我到目前为止的javascript代码：

Javascript代码

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

});

问题

此代码适用于我最终在行中有一个新的下拉列表，但我不确定如何选择/突出显示下拉列表中的项目，其值为＆＃34; 21581＆＃ 34 ;.或者，我可以使用＆＃34; location_name＆＃34;匹配项目。价值也是如此我现在面临的挑战是唯一确定要循环的正确框，因为从clone（）命令创建的新框与现有命令具有相同的名称。

编辑1

这里是代码现在的样子（顺便说一句，我不能改变我的jquery版本，因为这是别人的代码......所以我不能使用＆＃34; on＆＃34;指令。）

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

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

1 个答案: