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 相关文章推荐
javascript 匿名函数的理解(透彻版)
Jan 28 Javascript
JavaScript中关于indexOf的使用方法与问题小结
Aug 05 Javascript
探讨javascript是不是面向对象的语言
Nov 21 Javascript
javascript 面向对象封装与继承
Nov 27 Javascript
3个可以改善用户体验的AngularJS指令介绍
Jun 18 Javascript
jquery判断密码强度的验证代码
Apr 22 Javascript
JS使用eval()动态创建变量的方法
Jun 03 Javascript
JavaScript ES6中CLASS的使用详解
Nov 22 Javascript
微信小程序实现image组件图片自适应宽度比例显示的方法
Jan 16 Javascript
vue-devtools的安装步骤
Apr 23 Javascript
深入浅析JS中的严格模式
Jun 04 Javascript
Vue+Node实现商品列表的分页、排序、筛选,添加购物车功能详解
Dec 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采集相关教程之一 CURL函数库
2010/02/15 PHP
Thinkphp实现MySQL读写分离操作示例
2014/06/25 PHP
Smarty模板常见的简单应用分析
2016/11/15 PHP
php使用QueryList轻松采集js动态渲染页面方法
2018/09/11 PHP
laravel 输出最后执行sql 附:whereIn的使用方法
2019/10/10 PHP
javascript 处理事件绑定的一些兼容写法
2009/12/24 Javascript
javascript查找字符串中出现最多的字符和次数的小例子
2013/10/29 Javascript
js去除输入框中所有的空格和禁止输入空格的方法
2014/06/09 Javascript
简洁实用的BootStrap jQuery手风琴插件
2016/08/31 Javascript
ES6通过babel转码使用webpack使用import关键字
2016/12/13 Javascript
vue.js实现用户评论、登录、注册、及修改信息功能
2020/05/30 Javascript
浅谈Vue内置component组件的应用场景
2018/03/27 Javascript
Vue单页应用引用单独的样式文件的两种方式
2018/03/30 Javascript
vue脚手架及vue-router基本使用
2018/04/09 Javascript
[00:32]2018DOTA2亚洲邀请赛Newbee出场
2018/04/03 DOTA
pyqt4教程之messagebox使用示例分享
2014/03/07 Python
浅谈用VSCode写python的正确姿势
2017/12/16 Python
python的socket编程入门
2018/01/29 Python
python学习基础之循环import及import过程
2018/04/22 Python
Python enumerate函数遍历数据对象组合过程解析
2019/12/11 Python
NumPy统计函数的实现方法
2020/01/21 Python
Python读取yaml文件的详细教程
2020/07/21 Python
Python爬虫过程解析之多线程获取小米应用商店数据
2020/11/14 Python
详解CSS3实现响应式手风琴效果
2020/06/10 HTML / CSS
比利时的在线灯具店:Lampen24.be
2019/07/01 全球购物
华为智利官方商店:Huawei Chile
2020/05/09 全球购物
J2ee常用的设计模式?说明工厂模式
2015/05/21 面试题
建筑班组长岗位职责
2014/01/02 职场文书
聊城大学毕业生自荐书
2014/02/01 职场文书
员工安全生产承诺书
2014/05/22 职场文书
商业企业管理专业求职信
2014/07/10 职场文书
2014年班主任德育工作总结
2014/12/05 职场文书
ORACLE数据库对long类型字段进行模糊匹配的解决思路
2021/04/07 Oracle
在pycharm中无法import所安装的库解决方案
2021/05/31 Python
使用Nginx的访问日志统计PV与UV
2022/05/06 Servers
jdbc中自带MySQL 连接池实践示例
2022/07/23 MySQL