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 相关文章推荐
JavaScript监测ActiveX控件是否已经安装过的代码
Sep 02 Javascript
几个比较实用的JavaScript 测试及效验工具
Apr 18 Javascript
js 单击式的下拉菜单效果实例
Aug 13 Javascript
jquery 实现密码框的显示与隐藏示例代码
Sep 18 Javascript
form表单action提交的js部分与html部分
Jan 07 Javascript
JavaScript通过Date-Mask将日期转换成字符串的方法
Jun 04 Javascript
jQuery控制DIV层实现由大到小,由远及近动画变化效果
Oct 09 Javascript
vue中如何实现变量和字符串拼接
Jun 19 Javascript
Vue.js上下滚动加载组件的实例代码
Jul 17 Javascript
Node.js API详解之 querystring用法实例分析
Apr 29 Javascript
JavaScript编写开发动态时钟
Jul 29 Javascript
代码块高亮可复制显示js插件highlight.js+clipboard.js整合
Feb 15 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
基于OpenCart 开发支付宝,财付通,微信支付参数错误问题
2015/10/01 PHP
javascript下function声明一些小结
2007/12/28 Javascript
JavaScript Prototype对象
2009/01/07 Javascript
父子窗体间传递JSON格式的数据的代码
2010/12/25 Javascript
深入理解JavaScript中的箭头函数
2015/07/28 Javascript
jQuery实现的图文高亮滚动切换特效实例
2015/08/10 Javascript
JavaScript编程中布尔对象的基本使用
2015/10/25 Javascript
全面解析Bootstrap表单使用方法(表单控件)
2015/11/24 Javascript
jQuery实现搜索页面关键字的功能
2017/02/16 Javascript
详解Vue.js入门环境搭建
2017/03/17 Javascript
react高阶组件经典应用之权限控制详解
2017/09/07 Javascript
vue h5移动端禁止缩放代码
2019/10/28 Javascript
vue路由拦截器和请求拦截器知识点总结
2019/11/08 Javascript
vue print.js打印支持Echarts图表操作
2020/11/13 Javascript
Python引用(import)文件夹下的py文件的方法
2014/08/26 Python
使用Python实现一个简单的项目监控
2015/03/31 Python
定制FileField中的上传文件名称实例
2017/08/23 Python
python的staticmethod与classmethod实现实例代码
2018/02/11 Python
详解opencv中画圆circle函数和椭圆ellipse函数
2019/12/27 Python
Python模块的定义,模块的导入,__name__用法实例分析
2020/01/07 Python
Tensorflow全局设置可见GPU编号操作
2020/06/30 Python
CSS3解析抖音LOGO制作的方法步骤
2019/04/11 HTML / CSS
番木瓜健康和保健产品第一大制造商:Herbal Papaya
2017/04/25 全球购物
Bogner美国官网:滑雪服中的”Dior”
2018/01/30 全球购物
工业设计专业推荐信
2013/10/29 职场文书
怎样写留学自荐信
2013/11/11 职场文书
平面设计求职信
2014/03/10 职场文书
农村面貌改造提升实施方案
2014/03/18 职场文书
《金色的脚印》教后反思
2014/04/23 职场文书
学期评语大全
2014/04/30 职场文书
学习保证书100字
2015/02/26 职场文书
大一新生军训新闻稿
2015/07/17 职场文书
Mysql数据库命令大全
2021/05/26 MySQL
python代码实现扫码关注公众号登录的实战
2021/11/01 Python
25张裸眼3D图片,带你重温童年的记忆,感受3D的魅力
2022/02/06 杂记
python内置模块之上下文管理contextlib
2022/06/14 Python