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 ui插件的使用方法代码实例
May 08 Javascript
jquery如何实现锚点链接之间的平滑滚动
Dec 02 Javascript
JavaScript中的prototype.bind()方法介绍
Apr 04 Javascript
js检验密码强度(低中高)附图
Jun 05 Javascript
jQuery获取单击节点对象的方法
Jun 02 Javascript
javascript获取以及设置光标位置
Feb 16 Javascript
BootStrap Table 后台数据绑定、特殊列处理、排序功能
May 27 Javascript
JavaScript实现获取两个排序数组的中位数算法示例
Feb 26 Javascript
微信小程序身份证验证方法实现详解
Jun 28 Javascript
Vue.extend 编程式插入组件的实现
Nov 18 Javascript
Vue使用轮询定时发送请求代码
Aug 10 Javascript
vue实现把接口单独存放在一个文件方式
Aug 13 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
更改localhost为其他名字的方法
2014/02/10 PHP
PHP中substr_count()函数获取子字符串出现次数的方法
2016/01/07 PHP
PHP创建/删除/复制文件夹、文件
2016/05/03 PHP
javascript下利用arguments实现string.format函数
2010/08/24 Javascript
jQuery在html有效在jsp无效的原因及解决方法
2013/08/02 Javascript
基于jquery实现的树形菜单效果代码
2015/09/06 Javascript
Node.js静态文件服务器改进版
2016/01/10 Javascript
微信公众平台开发教程(四) 实例入门:机器人回复(附源码)
2016/12/02 Javascript
JS实现课堂随机点名和顺序点名
2017/03/09 Javascript
Angularjs验证用户输入的字符串是否为日期时间
2017/06/01 Javascript
jquery拖动改变div大小
2017/07/04 jQuery
详解vue项目接入微信JSSDK的坑
2018/12/14 Javascript
详解JavaScript栈内存与堆内存
2019/04/04 Javascript
vue router 组件的高级应用实例代码
2019/04/08 Javascript
微信小程序tab切换可滑动切换导航栏跟随滚动实现代码
2019/09/04 Javascript
vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法
2020/10/09 Javascript
python判断字符串编码的简单实现方法(使用chardet)
2016/07/01 Python
python笔记:mysql、redis操作方法
2017/06/28 Python
python 定时任务去检测服务器端口是否通的实例
2019/01/26 Python
python在回调函数中获取返回值的方法
2019/02/22 Python
Python的条件锁与事件共享详解
2019/09/12 Python
selenium+Chrome滑动验证码破解二(某某网站)
2019/12/17 Python
Python中bisect的使用方法
2019/12/31 Python
python将dict中的unicode打印成中文实例
2020/05/11 Python
Python flask路由间传递变量实例详解
2020/06/03 Python
Keras之fit_generator与train_on_batch用法
2020/06/17 Python
给Django Admin添加验证码和多次登录尝试限制的实现
2020/07/26 Python
Python OpenCV中的numpy与图像类型转换操作
2020/12/11 Python
携程旅行网:中国领先的在线旅行服务公司
2017/02/17 全球购物
优纳科技软件测试面试题
2012/05/15 面试题
商务英语应届生自我鉴定
2013/12/08 职场文书
出纳试用期自我鉴定
2014/04/07 职场文书
大学生英语演讲稿
2014/04/24 职场文书
土地租赁意向书
2014/07/30 职场文书
党员个人总结范文
2015/02/14 职场文书
小学体育课教学反思
2016/02/16 职场文书