js 获取服务器控件值的代码


Posted in Javascript onMarch 05, 2010

一、获取下拉列表选中项的值和文本(select)
代码 select.htm 示例如下:

<html> 
<head><title>获取下拉列表选中项的值和文本(select)</title></head> 
<body> 
<script> 
//获取下拉列表选中项的文本 
function getSelectedText(name){ 
var obj=document.getElementById(name); 
for(i=0;i<obj.length;i++){ 
if(obj[i].selected==true){ 
return obj[i].innerText; //关键是通过option对象的innerText属性获取到选项文本 
} 
} 
} 
//获取下拉列表选中项的值 
function getSelectedValue(name){ 
var obj=document.getElementById(name); 
return obj.value; //如此简单,直接用其对象的value属性便可获取到 
} 
</script> 
<select id="myselect"> 
<option value="fist">1</option> 
<option value="second">2</option> 
<option value="third">3</option> 
</select> 
<input type="button" value="所选文本" /> 
<input type="button" value="所选值" /> 
</body> 
</html>

二、获取单选按钮(radio)组的值和修改选中项
看到很多帖子里说js获取单选按钮(radio)组的值可以直接用document.getElementById("oper").value,虽然跟单选按钮组一样的下拉列表(也是列表项的数组)也是一个数组,用这种方式可以获到下拉列表的值,但是单选按钮组却获不到所选的值。仔细研究了下,总结如下:
与下拉列表不同,单选按钮须用this.form.oper或者document.getElementsByName('oper')方式获取该数组对象,document.getElementById('oper')不能获取该数组对象(select可以)。而且要获取值须通过一循环判断获取,不能直接用.value(select可以)。而要改变单选按钮组的选中项,也须用循环判断改变各个单选按钮的value。
测试代码radio.html 如下: 
<html> 
<head></head> 
<script language="javascript"> 
//求单选按纽的值,适用单选项及多选项。未选返回false;有选择项,返回选项值。 
function getRadio(oRadio){ 
var oRadioLength= oRadio.length; 
var oRadioValue = false; 
//alert("oRadioLength:["+oRadioLength+"]"); 
if (oRadioLength== undefined){ 
if (oRadio.checked){ 
oRadioValue = oRadio.value; 
} 
}else{ 
for (i=0;i<oRadioLength;i++){ 
//alert("oRadio["+i+"]:"+oRadio[i].checked+"/"+oRadio[i].value); 
if (oRadio[i].checked){ 
oRadioValue = oRadio[i].value; 
break; 
} 
} 
} 
return oRadioValue; 
} 
//方法改进: 
//求单选按纽的值,传radio名字作为参数。未选返回false;有选择项,返回选项值。 
function getRadioValue(name){ 
var radioes = document.getElementsByName(name); 
for(var i=0;i<radioes.length;i++) 
{ 
if(radioes[i].checked){ 
return radioes[i].value; 
} 
} 
return false; 
} 
//通过值修改所选中的单选按钮 
function changeRadio(oRadio,oRadioValue){ //传入一个对象 
for(var i=0;i<oRadio.length;i++) //循环 
{ 
if(oRadio[i].value==oRadioValue) //比较值 
{ 
oRadio[i].checked=true; //修改选中状态 
break; //停止循环 
} 
} 
} 
//改进: 
//通过值修改所选中的单选按钮 
function setRadio(name,sRadioValue){ //传入radio的name和选中项的值 
var oRadio = document.getElementsByName(name); 
for(var i=0;i<oRadio.length;i++) //循环 
{ 
if(oRadio[i].value==sRadioValue) //比较值 
{ 
oRadio[i].checked=true; //修改选中状态 
break; //停止循环 
} 
} 
} 
</script> 
<body> 
<form name="frm"> 
<input type="radio" name="oper" value="agree" >同意</td> 
<input type="radio" name="oper" value="downchange" checked>下发修改</td> 
<input type="radio" name="oper" value="refuse">拒保</td> 
<input type="radio" name="oper" value="report" >上报 </td> 
[br] 
alert('result:'+getRadio(this.form.oper)) 
<input type="button" name="test1" value="按钮1" > 
[br] 
alert('result:'+getRadio(document.getElementById('oper'))) 
<input type="button" name="test2" value="按钮2" > 
[br] 
alert(this.form.oper.value) 
<input type="button" name="test3" value="按钮3" > 
[br] 
changeRadio(this.form.oper,"上报") 
<input type="button" name="test4" value="按钮4" > 
[br][br][br][br] 
<select id="slt"> 
<option value="agree" >同意</option> 
<option value="downchange" selected>下发修改</option> 
<option value="refuse">拒保</option> 
<option value="report">上报</option> 
</select> 
[br] 
alert(this.form.slt.value) 
<input type="button" name="test5" value="按钮5" > 
[br] 
document.getElementById('slt')[2].innerText) 
<input type="button" name="test6" value="按钮6" > 
</form> 
</body> 
</html>
Javascript 相关文章推荐
jQuery UI 应用不同Theme的办法
Sep 12 Javascript
读jQuery之十四 (触发事件核心方法)
Aug 23 Javascript
javascript学习笔记(五) Array 数组类型介绍
Jun 19 Javascript
js 获取、清空input type=&quot;file&quot;的值示例代码
Feb 19 Javascript
不要使用jQuery触发原生事件的方法
Mar 03 Javascript
jquery.mobile 共同布局遇到的问题小结
Feb 10 Javascript
Javascript实现苹果悬浮虚拟按钮
Apr 10 Javascript
javascript实现粘贴qq截图功能(clipboardData)
May 29 Javascript
获取今天,昨天,本周,上周,本月,上月时间(实例分享)
Jan 04 Javascript
详解express与koa中间件模式对比
Aug 07 Javascript
学习JS中的DOM节点以及操作
Apr 30 Javascript
如何通过shell脚本自动生成vue文件详解
Sep 10 Javascript
jquery checkbox全选、取消全选实现代码
Mar 05 #Javascript
javascript 隐藏/显示指定的区域附HTML元素【legend】用法
Mar 05 #Javascript
ExtJS 工具栏 分页事件参数
Mar 05 #Javascript
Microsoft Ajax Minifier 压缩javascript的方法
Mar 05 #Javascript
javascript 浏览器检测代码精简版
Mar 04 #Javascript
前端开发部分总结[兼容性、DOM操作、跨域等](持续更新)
Mar 04 #Javascript
jquery与google map api结合使用 控件,监听器
Mar 04 #Javascript
You might like
php安全之直接用$获取值而不$_GET 字符转义
2012/06/03 PHP
php压缩HTML函数轻松实现压缩html/js/Css及注意事项
2013/01/27 PHP
php中simplexml_load_string使用实例分享
2014/02/13 PHP
详解PHP用substr函数截取字符串中的某部分
2016/12/03 PHP
解读JavaScript代码 var ie = !-[1,] 最短的IE判定代码
2011/05/28 Javascript
关于Javascript 对象(object)的prototype
2014/05/09 Javascript
jQuery动画效果图片轮播特效
2016/01/12 Javascript
理解javascript中Map代替循环
2016/02/26 Javascript
JS基础随笔(菜鸟必看篇)
2016/07/13 Javascript
Mac系统下Webstorm快捷键整理大全
2017/05/28 Javascript
利用jqgrid实现上移下移单元格功能
2018/11/07 Javascript
JavaScript的级联函数用法简单示例【链式调用】
2019/03/26 Javascript
javascript数组元素删除方法delete和splice解析
2019/12/09 Javascript
vue 组件基础知识总结
2021/01/26 Vue.js
python实现字符串和日期相互转换的方法
2015/05/13 Python
Python使用asyncio包处理并发详解
2017/09/09 Python
Python语言描述连续子数组的最大和
2018/01/04 Python
selenium+python实现自动化登录的方法
2018/09/04 Python
Django框架登录加上验证码校验实现验证功能示例
2019/05/23 Python
Python3 翻转二叉树的实现
2019/09/30 Python
Python csv文件的读写操作实例详解
2019/11/19 Python
css3打造一款漂亮的卡哇伊按钮
2013/03/20 HTML / CSS
心理学专业大学生职业生涯规划范文
2014/02/19 职场文书
大专毕业生求职信
2014/07/05 职场文书
乡镇党委书记个人整改措施
2014/09/15 职场文书
2014年街道办事处工作总结
2014/12/11 职场文书
2015年综治宣传月活动总结
2015/03/25 职场文书
未中标通知书
2015/04/17 职场文书
2015年公路路政个人工作总结
2015/07/24 职场文书
2016年大学迎新工作总结
2015/10/14 职场文书
2019个人工作总结
2019/06/21 职场文书
创业计划书之农家乐
2019/10/09 职场文书
读《茶花女》有感:山茶花的盛开与凋零
2020/01/17 职场文书
Python pandas求方差和标准差的方法实例
2021/08/04 Python
Go语言怎么使用变长参数函数
2022/07/15 Golang
Python pyecharts案例超市4年数据可视化分析
2022/08/14 Python