原理是使用JQuery访问outerHTML属性以达到最终效果。
示例中将input输入框被其name相同的select下拉框替换,其中select是事先在页面中并且display:none隐藏的。以下为代码:
<input type="text" name="user" />
<input type="text" name="pass" />
<select name="pass" style="width: 150px;display:none;">
<option value="0">红色</option>
<option value="1">蓝色</option>
<option value="2">黄色
</option>
</select>
$(function () {
$("input:text").each(function (index, obj) {
var obj = $("select[name=" + this.name + "]");
if (obj.length != 0) {//找到对应的select标签
$(this).prop("outerHTML", obj.prop("outerHTML"));//更改HTML
obj.remove();//清除原DOM以免重复
obj = $("select[name=" + this.name + "]");//重新查找对象
obj.show();//显示
}
});
})