JS获取文本框,下拉框,单选框的值的简单实例


Posted in Javascript onFebruary 26, 2014

1.文本框

1.1 <input type="text" name="test" id="test">

通过var t=document.getElementById("test").value把值赋给变量t,

1.2 当然也可以反过来把已知的变量值赋给文本框,例如:

var m = "5";
document.getElementById("test").value= m;

2.下拉列表框

2.1
<select name="sel" id="sel" onchange="look();">
<option value="1" >11</option>
<option value="2" selected>22</option>
<option value="3">33</option>
</select>

通过var s=document.getElementById("sel").value获取<select>框中选中的值,此处默认选中value="2"的选项,所以赋给变量s 的值是"2",而不是"22",

假如要把<select>中选择的"值"如"3"对应的"文本值"("33")赋给test文本框,可以通过如下方法,

<script language="javascript">
function look(){
      var se =document.getElementById("sel");   
                 var option=se.getElementsByTagName("option");   
                 var str = "" ;   
                 for(var i=0;i<option.length;++i)   
                 {   
                 if(options[i].selected)   
                 {   
                 document.getElementById("test").value = option[i].text;   
                 }   
                 }  
 
 
}
</script>

2.2 将给定的值与<select>框中的值进行比较,如果<select>中的<option>的value值与给定的值相同,则选中它。
var m = "2",
for(var i = 0;i<document.getElementById("sel").length;i++)
         { 
          with(document.getElementById("sel").options[i])
                 { 
                 if(value == m)
                 {
                 selected = true;
                 }
                 }
         }

3.单选框

一排单选框的name属性值必须相同,这样才可以实现单选。

<INPUT TYPE="radio" NAME="a" value="1">aaaaaaaaaa<br>
<INPUT TYPE="radio" NAME="a" value="2">bbbbbbbbb<br>
<INPUT TYPE="button" onclick="check();" value="test">
<script LANGUAGE="javascript">
<!--
function check()
{
var sel = 0;
for (var i = 0; i < document.getElementsByName("a").length; i++)
 {
   if(document.getElementsByName("a")[i].checked)
   
 {
    

sel = document.getElementsByName("a")[i].value;
   
}
 }


 if(sel == 1)

  {


  alert("aaaaaaaaaa");


  }

 else if(sel== 2)

 {
   

alert("bbbbbbbbb");


}
}
//-->
</script>

Js获取下拉框选定项的值和文本

Firefox和IE下获取下拉框选定项的值和文本:

1.IE和Firefox都支持的方法:

获取文本

var obj=document.getElementById('select_template');
var text=obj.options[obj.selectedIndex].text;//获取文本
var obj=document.getElementById("select_template");
        for(i=0;i<obj.length;i++) {//下拉框的长度就是他的选项数
           if(obj[i].selected==true) {
            var text=obj[i].text;//获取文本
        }
}

二者相比上一个方法比较简洁

1.IE支持Firefox不支持:

var obj=document.getElementById(name);
for(i=0;i<obj.length;i++)  {
        if(obj[i].selected==true) {
           var text= obj[i].innerText;     
        }
    }

获取值方法IE和Firefox通用:
var value=document.getElementById("select_template").value;//获取值

总结:其实主要就是IE和Firefox都支持value和text属性,Firefox不支持innerText属性。

Js实现当前页打开一个新链接:
window.location.href=url;

Javascript 相关文章推荐
JQuery 返回布尔值Is()条件判断方法代码
May 14 Javascript
IE8的JavaScript点击事件(onclick)不兼容的解决方法
Nov 22 Javascript
通过Jquery.cookie.js实现展示浏览网页的历史记录超管用
Oct 23 Javascript
jQuery+php实时获取及响应文本框输入内容的方法
May 24 Javascript
微信小程序 条件渲染详解
Oct 09 Javascript
bootstrap选项卡使用方法解析
Jan 11 Javascript
Vue.extend构造器的详解
Jul 17 Javascript
基于JavaScript实现百度搜索框效果
Jun 28 Javascript
react高阶组件经典应用之权限控制详解
Sep 07 Javascript
js计算最大公约数和最小公倍数代码实例
Sep 11 Javascript
八种Vue组件间通讯方式合集(推荐)
Aug 18 Javascript
详解ES6 中的Object.assign()的用法实例代码
Jan 11 Javascript
Js获取下拉框选定项的值和文本的实现代码
Feb 26 #Javascript
js自动查找select下拉的菜单并选择(示例代码)
Feb 26 #Javascript
jQuery设置与获取HTML,文本和值的简单实例
Feb 26 #Javascript
js(JavaScript)实现TAB标签切换效果的简单实例
Feb 26 #Javascript
Javascript高级技巧分享
Feb 25 #Javascript
鼠标拖拽移动子窗体的JS实现
Feb 25 #Javascript
js判断为空Null与字符串为空简写方法
Feb 24 #Javascript
You might like
PHP实现绘制3D扇形统计图及图片缩放实例
2014/10/01 PHP
PHP面向对象程序设计重载(overloading)操作详解
2019/06/13 PHP
自动生成文章摘要的代码[JavaScript 版本]
2007/03/20 Javascript
IE6、IE7中setAttribute不支持class/for/rowspan/colspan等属性
2011/08/28 Javascript
javascript 寻找错误方法整理
2014/06/15 Javascript
基于Jquery+Ajax+Json实现分页显示附效果图
2014/07/30 Javascript
JavaScript中的prototype原型学习指南
2016/05/09 Javascript
JavaScript面试开发常用的知识点总结
2016/08/08 Javascript
基于JavaScript实现鼠标箭头移动图片跟着移动
2016/08/30 Javascript
AngularJS 过滤器(自带和自建)详解
2016/09/19 Javascript
bootstrap vue.js实现tab效果
2017/02/07 Javascript
JQuery页面随滚动条动态加载效果的简单实现(推荐)
2017/02/08 Javascript
[01:02:03]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS VG
2014/05/26 DOTA
[03:55]2014DOTA2国际邀请赛 Fnatic经理采访赢DK在情理之中
2014/07/10 DOTA
[42:39]老党炸弹人试玩视频
2014/09/03 DOTA
Python环境下安装使用异步任务队列包Celery的基础教程
2016/05/07 Python
python虚拟环境virtualenv的安装与使用
2017/09/21 Python
python将list转为matrix的方法
2018/12/12 Python
基于pandas中expand的作用详解
2019/12/17 Python
python3中的logging记录日志实现过程及封装成类的操作
2020/05/12 Python
python要安装在哪个盘
2020/06/15 Python
英国领先的男装设计师服装购物网站:Mainline Menswear
2018/02/04 全球购物
美国在线纱线商店:Darn Good Yarn
2019/03/20 全球购物
构造器Constructor是否可被override?
2013/08/06 面试题
Java如何格式化日期
2012/08/07 面试题
在C++ 程序中调用被C 编译器编译后的函数,为什么要加extern "C"
2014/08/09 面试题
管理失职检讨书
2014/02/12 职场文书
宣传普通话标语
2014/06/27 职场文书
幼儿园校园小喇叭广播稿
2014/10/17 职场文书
民政局标准版离婚协议书
2014/12/01 职场文书
三年级学生评语大全
2014/12/26 职场文书
护士求职自荐信
2015/03/25 职场文书
2015年采购部工作总结
2015/04/23 职场文书
主持稿开场白
2015/06/01 职场文书
2016年元旦致辞
2015/08/01 职场文书
制作能在nginx和IIS中使用的ssl证书
2021/06/21 Servers