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 相关文章推荐
js下用gb2312编码解码实现方法
Dec 31 Javascript
js bind 函数 使用闭包保存执行上下文
Dec 26 Javascript
JS中toFixed()方法引起的问题如何解决
Nov 20 Javascript
jquery win 7透明弹出层效果的简单代码
Aug 06 Javascript
关于两个jQuery(js)特效冲突的bug的解决办法
Sep 04 Javascript
JS中SetTimeout和SetInterval使用初探
Mar 23 Javascript
ComboBox(下拉列表框)通过url加载调用远程数据的方法
Aug 06 Javascript
javascript帧动画(实例讲解)
Sep 02 Javascript
JavaScript中正则表达式使数字、中文或指定字符高亮显示
Oct 31 Javascript
关于React动态加载路由处理的相关问题
Jan 07 Javascript
vue实现图片预览组件封装与使用
Jul 13 Javascript
vue@cli3项目模板怎么使用public目录下的静态文件
Jul 07 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使之能同时支持GIF和JPEG
2006/10/09 PHP
PHP入门速成教程
2007/03/19 PHP
数组与类使用PHP的可变变量名需要的注意的问题
2013/06/20 PHP
1亿条数据如何分表100张到Mysql数据库中(PHP)
2015/07/29 PHP
php实现带读写分离功能的MySQL类完整实例
2016/07/28 PHP
header与缓冲区之间的深层次分析
2016/07/30 PHP
Thinkphp框架开发移动端接口(1)
2016/08/18 PHP
PHP中mysqli_get_server_version()的实例用法
2020/02/03 PHP
javascript学习笔记(七) js函数介绍
2012/06/19 Javascript
window.open打开页面居中显示的示例代码
2013/12/27 Javascript
jquery取消选择select下拉框示例代码
2014/02/22 Javascript
jQuery实现渐变下拉菜单的简单方法
2015/03/11 Javascript
详解jQuery中的元素的属性和相关操作
2015/08/14 Javascript
JQuery页面随滚动条动态加载效果的简单实现(推荐)
2017/02/08 Javascript
ReactJs设置css样式的方法
2017/06/08 Javascript
详解使用Vue Router导航钩子与Vuex来实现后退状态保存
2017/09/11 Javascript
vue 表单之通过v-model绑定单选按钮radio
2019/05/13 Javascript
Python中for循环详解
2014/01/17 Python
详解Python中的正则表达式的用法
2015/04/09 Python
Python封装原理与实现方法详解
2018/08/28 Python
对python修改xml文件的节点值方法详解
2018/12/24 Python
pycharm 将python文件打包为exe格式的方法
2019/01/16 Python
python 随机生成10位数密码的实现代码
2019/06/27 Python
Python获取统计自己的qq群成员信息的方法
2019/11/15 Python
tensorboard显示空白的解决
2020/02/15 Python
Python Scrapy框架:通用爬虫之CrawlSpider用法简单示例
2020/04/11 Python
python 基于Apscheduler实现定时任务
2020/12/15 Python
Python tkinter之ComboBox(下拉框)的使用简介
2021/02/05 Python
用CSS3实现背景渐变的方法
2015/07/14 HTML / CSS
亚瑟士美国官网:ASICS美国
2017/02/01 全球购物
PHP如何去执行一个SQL语句
2016/03/05 面试题
《微笑着面对生活》优秀演讲稿范文
2014/09/23 职场文书
2015年工程部工作总结
2015/04/30 职场文书
驳回起诉裁定书
2015/05/19 职场文书
学生会工作感言
2015/08/07 职场文书
PHP实现rar解压读取扩展包小结
2021/06/03 PHP