JS获取下拉框显示值和判断单选按钮的方法


Posted in Javascript onJuly 09, 2015

本文实例讲述了JS获取下拉框显示值和判断单选按钮的方法。分享给大家供大家参考。具体如下:

1.本人做过很多项目,都需要得到select组件显示的值。下面是我经常用到的方法:

Html源码如下:

<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>

JS函数如下:

function setTxt()
{
 var _selObj=document.getElementByIdx_xx('province');//取下拉框的元素
 var _selVal=_selObj[_selObj.selectedIndex].text;//取下拉框被选中的值
 document.getElementByIdx_xx('provinceName').value=_selVal;
}

2.本人也做过很多判断radio单选按钮是否被选中的情况,下面是我常用到得方法:

HTML页面源码如下:

<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函数代码:

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 相关文章推荐
js中confirm实现执行操作前弹出确认框的方法
Nov 01 Javascript
jQuery过滤选择器详解
Jan 13 Javascript
jquery表单验证需要做些什么
Nov 17 Javascript
javascript设计模式--策略模式之输入验证
Nov 27 Javascript
AngularJS 路由详解和简单实例
Jul 28 Javascript
详解Vue使用 vue-cli 搭建项目
Apr 20 Javascript
vue2 自定义动态组件所遇到的问题
Jun 08 Javascript
Angular 作用域scope的具体使用
Dec 11 Javascript
微信小程序button组件使用详解
Jan 31 Javascript
vue 项目中使用Loading组件的示例代码
Aug 31 Javascript
Bootstrap fileinput 上传新文件移除时触发服务器同步删除的配置
Oct 08 Javascript
QT与javascript交互数据的实现
May 26 Javascript
JavaScript的类型、值和变量小结
Jul 09 #Javascript
JS实现文档加载完成后执行代码
Jul 09 #Javascript
jQuery检测某个元素是否存在代码分享
Jul 09 #Javascript
jquery.map()方法的使用详解
Jul 09 #Javascript
jQuery实现鼠标点击弹出渐变层的方法
Jul 09 #Javascript
javascript+ajax实现产品页面加载信息
Jul 09 #Javascript
浅谈JavaScript中null和undefined
Jul 09 #Javascript
You might like
PHP编程中字符串处理的5个技巧小结
2007/11/13 PHP
PHP面向对象分析设计的61条军规小结
2010/07/17 PHP
一漂亮的PHP图片验证码实例
2014/03/21 PHP
php使用pack处理二进制文件的方法
2014/07/03 PHP
php菜单/评论数据递归分级算法的实现方法
2019/08/01 PHP
Laravel5.5 数据库迁移:创建表与修改表示例
2019/10/23 PHP
[原创]站长必须要知道的javascript广告代码
2007/05/30 Javascript
javascript instanceof 与typeof使用说明
2010/01/11 Javascript
13个绚丽的Jquery 界面设计网站推荐
2010/09/28 Javascript
JavaScript Accessor实现说明
2010/12/06 Javascript
Jquery实现侧边栏跟随滚动条固定(兼容IE6)
2014/04/02 Javascript
JavaScript中双叹号!!作用示例介绍
2014/09/21 Javascript
jquery可定制的在线UEditor编辑器
2015/11/17 Javascript
详解js实现线段交点的三种算法
2016/08/09 Javascript
jQuery多级联动下拉插件chained用法示例
2016/08/20 Javascript
JS实现无缝循环marquee滚动效果
2017/05/22 Javascript
深入浅析Nodejs的Http模块
2017/06/20 NodeJs
Material(包括Material Icon)在Angular2中的使用详解
2018/02/11 Javascript
vue.js使用v-pre与v-html输出HTML操作示例
2018/07/07 Javascript
nodejs微信开发之接入指南
2019/03/17 NodeJs
利用Node.js如何实现文件循环覆写
2019/04/05 Javascript
JS面向对象之单选框实现
2020/01/17 Javascript
[00:53]TI3正赛第三天 DK怒破A队不败金身 现场国旗飘扬热血激昂
2013/08/10 DOTA
[01:48]2018DOTA2亚洲邀请赛主赛事第二日五佳镜头 VG完美团战逆转TNC
2018/04/05 DOTA
Python实现拷贝/删除文件夹的方法详解
2018/08/29 Python
Python docx库用法示例分析
2019/02/16 Python
Python基于QQ邮箱实现SSL发送
2020/04/26 Python
Django 解决新建表删除后无法重新创建等问题
2020/05/21 Python
Python中Selenium模块的使用详解
2020/10/09 Python
canvas烟花特效锦集
2018/01/17 HTML / CSS
碧欧泉法国官网:Biotherm法国
2019/10/23 全球购物
承诺书怎么写
2014/03/26 职场文书
地质灾害防治方案
2014/05/14 职场文书
大学生实习证明范本
2014/09/19 职场文书
2014年检验员工作总结
2014/11/19 职场文书
工程技术负责人岗位职责
2015/04/13 职场文书