你可以使用jQuery来动态改变输入字段的类型吗？

-2

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

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

到位标签的创建一个下拉列表。
从页面上现有的下拉列表中获取此下拉列表的值/列表。（称为“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的版本，因为这是别人的代码......所以我不能在“上使用“指令。）

$(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值。

来源

2015-10-19 dot

http://stackoverflow.com/questions/7895205/creating-dropdown -selectoption-elements-with-javascript，http://stackoverflow.com/questions/4814512/how-to-create-dropdown-list-dynamically-using-jquery – caramba

https://api.jquery.com/clone/ – DontVoteMeDown

@DontVoteMeDown酷。我不知道那件事。但是，这会将选择添加到输入，而不是将其替换正确吗？我需要替换它 – dot

未经测试，但这个应该这样做（基本上）根据您的编辑

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

来源

2015-10-19 19:44:04 Jbird

轻微的错误'find（'option'）' – Steve

'replaceAll（menu）' – turbopipp

糟糕 - 感谢伙计们。编辑。 – Jbird

你可以使用jQuery来动态改变输入字段的类型吗？

回答

相关问题