本文介绍两种常见的JavaScript DOM操作技巧:一是如何获取Select下拉菜单中选项的显示文本而非value值,二是如何遍历判断Radio单选按钮组中是否有选项被选中。通过具体的HTML结构与JS函数示例,展示获取选中值及验证选择状态的实现代码,适用于基础前端交互开发场景。
本文通过具体实例,详细讲解如何使用JavaScript获取下拉框的显示文本值,并判断单选按钮的选中状态。内容包含完整的HTML结构与对应的JS函数实现,供开发者参考借鉴。
获取Select下拉框显示文本
在实际项目开发中,经常需要获取Select组件中当前选中项的显示文本。以下介绍一种常用的实现方式。
首先构建基础的HTML结构,包含一个Select下拉框和用于显示结果的文本输入框,以及触发操作的按钮。
<html><body>
<select id="province" name="province" >
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">江苏</option>
<option value="4">河北</option>
</select>
<br/>
<input type="text" id="provinceName" name="provinceName"/>
<input type="button" onClick="setTxt()" value="赋值"/>
</body></html>
接着编写对应的JavaScript函数,通过DOM操作获取选中项的文本内容并赋值给文本框。
function setTxt()
{
var _selObj=document.getElementByIdx_xx('province');//取下拉框的元素
var _selVal=_selObj[_selObj.selectedIndex].text;//取下拉框被选中的值
document.getElementByIdx_xx('provinceName').value=_selVal;
}
判断Radio单选按钮选中状态
此外,在处理表单时,常需判断Radio单选按钮组中是否有选项被选中。以下是常用的验证方法。
HTML页面中包含一组名称相同的Radio按钮,用于选择日期,并设置一个按钮来触发状态检查。
<html><body>
<input type="radio" name="time" value="2009-05-20"/>2009-05-20
<input type="radio" name="time" value="2009-05-21"/>2009-05-21
<input type="radio" name="time" value="2009-05-22"/>2009-05-22
<input type="radio" name="time" value="2009-05-23"/>2009-05-23
<input type="button" value="判断是否选择" onclick="alert(judge())"/>
</body></html>
编写JS函数遍历Radio按钮组,检查每个按钮的checked属性,若存在选中项则返回true,否则提示未选中。
function judge()
{ var status =false;
var _radObj=document.getElementsByName('time');
for(var i =0;i<_radObj.length;i++){
if(_radObj[i].checked){
status=true;
}
}
if(! status){
alert('未选中时间!');
}
return status;
}
希望上述关于JavaScript获取下拉框显示值和判断单选按钮选中状态的内容,能对各位的JavaScript程序设计有所帮助。