js中动态设置select中option选中/设置radio选中/获取textarea值

本文介绍使用JavaScript为HTML表单元素如select、radio及textarea设置默认值的方法。通过简单的函数实现动态设置select选项,根据状态值选中指定radio按钮,并为textarea赋值。

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

Java开发过程中,很多人会遇到在修改信息之前,获取原有数据信息到表单时,有些信息获取不到,比如某系统一个用户想修改自己的个人信息,这个信息列表中就包含选择select标签,选中radio标签,文本域textarea标签等。因为不是像input等这种标签,可以在标签内部定义value属性。所以接下来,集中的说下碰到这几种标签怎么办,仅仅提供思路!如有问题,可以私信我!我看到会及时回复!

1js动态设置select中option选中

function setSelectChecked(){  
    var select=document.getElementById("Type");
        var
typeValue = document.getElementById("type").value;
        for(var i=0; i<select.options.length; i++){  
            if(select.options[i].innerHTML ==
typeValue){  
                select.options[i].selected = true;  
                break;  
            }  
        }  
    }

2js如何设置radio选中

function setRadioChecked(){  
    var radioValue=document.getElementById("state").value;
    if(radioValue=="生效"){
    $("#stateon").attr("checked","checked");  
    $("#stateoff").removeAttr("checked");
    }else{
    $("#stateoff").attr("checked","checked");  
    $("#stateon").removeAttr("checked");
    }

}


3js中给textarea赋值

function setTextContent(){
    var
remarkValue=document.getElementById("Remark").value;
    document.getElementById("Remark").value="";
    document.getElementById("remark").innerText=
remarkValue;
}

Remark是获取值的id;remark是textarea的id。

以上这三种方法代码简洁精辟!很不错!

<h1>注册信息</h1> <form action="action_page.php" method="get"> <label>姓名:</label><input type="text" placeholder="请输入真实姓名"> <br></br> <label>密码:</label><input type="password" placeholder="请输入密码"> <br></br> <label>确认密码:</label><input type="password" placeholder="请输入确认密码"> <br></br> <label>性别:</label> <label><input type="radio" name="gender"> 男</label> <label><input type="radio" name="gender" checked> 女</label> <br></br> <label>居住城市:</label> <select> <option>北京</option> <option>上海</option> <option>广州</option> <option>深圳</option> <option>武汉</option> </select> <h2>教育经历</h2> <label>最高学历:</label> <select> <option>博士</option> <option>硕士</option> <option>本科</option> <option>大专</option> </select> <br></br> <label>学校名称:</label><input type="text"> <br></br> <label>所学专业:</label><input type="text"> <br></br> <label>在校时间:</label> <select> <option>2015</option> <option>2016</option> <option>2017</option> <option>2018</option> </select> <br></br> <select> <option>2019</option> <option>2020</option> <option>2021</option> <option>2022</option> </select> <br></br> <h2>工作经历</h2> <label>公司名称:</label><input type="text"> <br></br> <label>工作描述:</label> <br> <textarea></textarea> <br></br> <input type="checkbox"><label>已阅读并同意以下协议:</label> <ul> <li><a href="#">《用户服务协议》</a></li> <li><a href="#">《隐私政策》</a></li> </ul> <br></br> <button>免费注册</button> <button type="reset">重新填写</button> </form>
最新发布
04-03
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值