在前端开发中，我们常常需要对HTML文档中的元素进行操作。其中，选定选项是指input、select、textarea等表单元素中被选中的值。这篇文章将介绍如何更改HTML选择元素的选定选项。
input元素
单选按钮（radio）
单选按钮是一组互斥的选项，只能选中一个。我们可以通过设置其checked属性来更改选中状态。
<input type="radio" name="gender" value="male" checked> <label for="male">男</label> <input type="radio" name="gender" value="female"> <label for="female">女</label>
上述代码中，第一个单选按钮被设置为选中状态。
复选框（checkbox）
复选框可以选中多个选项。我们可以通过设置其checked属性来更改选中状态。
<input type="checkbox" name="fruit" value="apple" checked> <label for="apple">苹果</label> <input type="checkbox" name="fruit" value="banana"> <label for="banana">香蕉</label> <input type="checkbox" name="fruit" value="orange" checked> <label for="orange">橘子</label>
上述代码中，第一个和第三个复选框被设置为选中状态。
文本框（text）
文本框可以输入文本内容。我们可以通过设置其value属性来更改文本内容。
<input type="text" name="username" value="张三">
上述代码中，文本框中的内容为“张三”。
隐藏域（hidden）
隐藏域可以保存不需要显示给用户的数据。我们可以通过设置其value属性来更改隐藏域的内容。
<input type="hidden" name="userid" value="123456">
上述代码中，隐藏域中的内容为“123456”。
select元素
select元素是一个下拉菜单，可以选择其中的一个选项。我们可以通过设置其selected属性来更改选中状态。
<select name="city"> <option value="beijing">北京</option> <option value="shanghai" selected>上海</option> <option value="guangzhou">广州</option> <option value="shenzhen">深圳</option> </select>
上述代码中，第二个选项被设置为选中状态。
textarea元素
textarea元素可以输入多行文本内容。我们可以通过设置其value属性来更改文本内容。
<textarea name="comment">这是一条评论。</textarea>
上述代码中，文本框中的内容为“这是一条评论。”。
总结
通过本文介绍，我们了解了如何更改HTML选择元素的选定选项。在实际开发中，我们可以根据需求灵活运用这些技巧，提高前端开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/11249
