JQ替换标签与内容

最新推荐文章于 2022-11-11 08:49:16 发布

原创最新推荐文章于 2022-11-11 08:49:16 发布 · 3.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#HTML辅助方法 #Jquery

本文介绍如何利用jQuery将原有的文本输入框转换为审核状态选择的下拉框，并保留原始选中的值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JQ：　　　
　 $('#Status').replaceWith(function () {
       return $("<select ><option value='0'>未认证</option><option value='1'>待审核</option><option value='2'>已认证</option><option value='3'>未通过</option><select/>").append($(this).contents());
   });

 Html辅助方法：
 @Html.TextBoxFor(model => model.Status, new { placeholder = "输入审核状态:0:未申请，1:已申请，2:通过，3:不通过", minlength = "1", maxlength = "100", required = "required" })

辅助方法生成的Html：
<input data-val="true" data-val-number="字段 Status 必须是一个数字。" data-val-required="Status 字段是必需的。" id="Status" maxlength="100" minlength="1" name="Status" placeholder="输入审核状态:0:未申请，1:已申请，2:通过，3:不通过" required="required" type="text" value="0">

效果图：

效果图Html代码：
<select><option value="0">未认证</option><option value="1">待审核</option><option value="2">已认证</option><option value="3">未通过</option></select>


var opStasus = $('#Status').val();//拿出原本的数据
        $('#Status').replaceWith(function () {
            return $("<select ><option class='op' value='0'>未认证</option><option class='op' value='1'>待审核</option><option class='op' value='2'>已认证</option><option class='op' value='3'>未通过</option><select/>").append($(this).contents());
        });//替换标签
        $(".op").each(function () {//遍历查询对应的值
            if ($(this).val() == opStasus) {
                $(this).attr("selected", "selected");//将对应的标签添加选中selected
            }
        })