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和C#中获得referer
Nov 14 Javascript
JavaScript中函数表达式和函数声明及函数声明与函数表达式的不同
Nov 15 Javascript
理解 JavaScript Scoping &amp; Hoisting(二)
Nov 18 Javascript
整理Javascript函数学习笔记
Dec 01 Javascript
详解使用Vue.Js结合Jquery Ajax加载数据的两种方式
Jan 10 Javascript
浅谈ajax请求不同页面的微信JSSDK问题
Feb 26 Javascript
如何在微信小程序里面退出小程序的方法
Apr 28 Javascript
elementUI select组件value值注意事项详解
May 29 Javascript
Javascript幻灯片播放功能实现过程解析
May 07 Javascript
vue组件系列之TagsInput详解
May 14 Javascript
vue打包通过image-webpack-loader插件对图片压缩优化操作
Nov 12 Javascript
ES5和ES6中类的区别总结
Dec 21 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实现文件下载功能的几个代码分享
2014/05/10 PHP
Laravel中前端js上传图片到七牛云的示例代码
2017/09/04 PHP
Laravel 加载第三方类库的方法
2018/04/20 PHP
使用Zookeeper分布式部署PHP应用程序
2019/03/15 PHP
PHP 面向对象程序设计之类属性与类常量实现方法分析
2020/04/13 PHP
JSONObject使用方法详解
2015/12/17 Javascript
javascript html5摇一摇功能的实现
2016/04/19 Javascript
echart简介_动力节点Java学院整理
2017/08/11 Javascript
全面解析vue router 基本使用(动态路由,嵌套路由)
2018/09/02 Javascript
JS代码屏蔽F12,右键,粘贴,复制,剪切,选中,操作实例
2019/09/17 Javascript
layui lay-verify form表单自定义验证规则详解
2019/09/18 Javascript
Jquery异步上传文件代码实例
2019/11/13 jQuery
JavaScript中的类型检查
2020/02/03 Javascript
Javascript模拟实现new原理解析
2020/03/03 Javascript
Python实现类似jQuery使用中的链式调用的示例
2016/06/16 Python
python 自动化将markdown文件转成html文件的方法
2016/09/23 Python
Python日期时间对象转换为字符串的实例
2018/06/22 Python
使用python实现快速搭建简易的FTP服务器
2018/09/12 Python
Python计算库numpy进行方差/标准方差/样本标准方差/协方差的计算
2018/12/28 Python
详解pandas库pd.read_excel操作读取excel文件参数整理与实例
2019/02/17 Python
python实现点击按钮修改数据的方法
2019/07/17 Python
django做form表单的数据验证过程详解
2019/07/26 Python
django实现用户注册实例讲解
2019/10/30 Python
详解Django配置优化方法
2019/11/18 Python
在pycharm中创建django项目的示例代码
2020/05/28 Python
Python变量格式化输出实现原理解析
2020/08/06 Python
HTML5实现简单图片上传所遇到的问题及解决办法
2016/01/20 HTML / CSS
高尔夫球鞋、服装、手套和装备:FootJoy
2018/12/15 全球购物
性能测试工程师的面试题
2015/02/20 面试题
物理教育专业毕业生推荐信
2013/11/03 职场文书
优秀士兵个人事迹材料
2014/01/19 职场文书
大学老师推荐信
2014/02/25 职场文书
试用期工作表现自我评价
2015/03/06 职场文书
SpringRetry重试框架的具体使用
2021/07/25 Java/Android
docker 制作mysql镜像并自动安装
2022/05/20 Servers
使用Nginx+Tomcat实现负载均衡的全过程
2022/05/30 Servers