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 相关文章推荐
取得传值的函数
Oct 27 Javascript
JavaScript经典效果集锦
Jul 06 Javascript
jQuery表格行换色的三种实现方法
Jun 27 Javascript
jquery设置元素的readonly和disabled的写法
Sep 22 Javascript
Jquery 数组操作大全个人总结
Nov 13 Javascript
javascript中键盘事件用法实例分析
Jan 30 Javascript
AngularJS使用ngMessages进行表单验证
Dec 27 Javascript
AngularJS实现ajax请求的方法
Nov 22 Javascript
常见的浏览器Hack技巧整理
Jun 29 Javascript
微信小程序模拟cookie的实现
Jun 20 Javascript
jQuery - AJAX load() 实例用法详解
Aug 27 jQuery
微信小程序返回上一级页面的实现代码
Jun 19 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
第四节--构造函数和析构函数
2006/11/16 PHP
PHP学习笔记之数组篇
2011/06/28 PHP
基于PHP常用字符串的总结(待续)
2013/06/07 PHP
浅析PHP编程中10个最常见的错误
2014/08/08 PHP
thinkPHP框架中执行原生SQL语句的方法
2017/10/25 PHP
PHP 记录访客的浏览信息方法
2018/01/29 PHP
固定背景实现的背景滚动特效示例分享
2013/05/19 Javascript
JS的Document属性和方法小结
2013/09/17 Javascript
jQuery多项选项卡的实现思路附样式及代码
2014/06/03 Javascript
JavaScript中的eval()函数使用介绍
2014/12/31 Javascript
jQuery实现自定义右键菜单的树状菜单效果
2015/09/02 Javascript
js实现的下拉框二级联动效果
2016/04/30 Javascript
vue轮播图插件vue-awesome-swiper
2017/11/27 Javascript
React Native中NavigatorIOS组件的简单使用详解
2018/01/27 Javascript
JS实现json对象数组按对象属性排序操作示例
2018/05/18 Javascript
微信小程序6位或多位验证码密码输入框功能的实现代码
2018/05/29 Javascript
jQuery md5加密插件jQuery.md5.js用法示例
2018/08/24 jQuery
Vue 实现列表动态添加和删除的两种方法小结
2018/09/07 Javascript
利用H5api实现时钟的绘制(javascript)
2020/09/13 Javascript
用Python写一个无界面的2048小游戏
2016/05/24 Python
谈谈Python中的while循环语句
2019/03/10 Python
关于Python形参打包与解包小技巧分享
2019/08/24 Python
Python urllib3软件包的使用说明
2020/11/18 Python
Python 生成短8位唯一id实战教程
2021/01/13 Python
如何利用find命令查找文件
2016/11/18 面试题
Linux面试经常问的文件系统操作命令
2015/11/05 面试题
大学专科生推荐信范文
2013/11/23 职场文书
趣味比赛活动方案
2014/02/15 职场文书
施工安全协议书范本
2014/09/26 职场文书
2014年政工师工作总结
2014/12/18 职场文书
鸡毛信观后感
2015/06/11 职场文书
对Keras自带Loss Function的深入研究
2021/05/25 Python
mysql timestamp比较查询遇到的坑及解决
2021/11/27 MySQL
Golang流模式之grpc的四种数据流
2022/04/13 Golang
java版 联机五子棋游戏
2022/05/04 Java/Android
box-shadow单边阴影的实现
2023/05/21 HTML / CSS