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同时控制四张图片的伸缩实现代码
Apr 19 Javascript
IE8对JS通过属性和数组遍历解析不一样的地方探讨
May 06 Javascript
Javascript弹出窗口的各种方法总结
Nov 11 Javascript
js的hasownproperty使用示例
Mar 02 Javascript
select多选 multiple的使用示例
Jun 16 Javascript
json属性名为什么要双引号(个人猜测)
Jul 31 Javascript
Jquery 实现grid绑定模板
Jan 28 Javascript
jquery结婚电子请柬特效源码分享
Aug 21 Javascript
详解Vue.js之视图和数据的双向绑定(v-model)
Jun 23 Javascript
微信小程序 跳转传递数据的实例
Jul 06 Javascript
bootstrap table实现点击翻页功能 可记录上下页选中的行
Sep 28 Javascript
React Native AsyncStorage本地存储工具类
Oct 24 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
自动把纯文本转换成Web页面的php代码
2009/08/27 PHP
使用PHP接收POST数据,解析json数据
2013/06/28 PHP
PHP数据库万能引擎类adodb配置使用以及实例集锦
2014/06/12 PHP
PHP中的插件机制原理和实例
2014/07/08 PHP
PHP多态代码实例
2015/06/26 PHP
常见的5个PHP编码小陋习以及优化实例讲解
2021/02/27 PHP
Mootools 1.2教程 正则表达式
2009/09/15 Javascript
js下用层来实现select的title提示属性
2010/02/23 Javascript
js 面向对象的技术创建高级 Web 应用程序
2010/02/25 Javascript
在IE6下发生Internet Explorer cannot open the Internet site错误
2010/06/21 Javascript
引用其它js时如何同时处理多个window.onload事件
2014/09/02 Javascript
jquery禁止回车触发表单提交
2014/12/12 Javascript
jQuery中ajax的post()方法用法实例
2014/12/26 Javascript
javascript中clipboardData对象用法详解
2015/05/13 Javascript
原生js实现图片层叠轮播切换效果
2016/02/02 Javascript
Bootstrap table分页问题汇总
2016/05/30 Javascript
JQuery 设置checkbox值二次无效的解决方法
2016/07/22 Javascript
JS实现点击表头表格自动排序(含数字、字符串、日期)
2017/01/22 Javascript
AngularJS实现的鼠标拖动画矩形框示例【可兼容IE8】
2019/05/17 Javascript
在NodeJs中使用node-schedule增加定时器任务的方法
2020/06/08 NodeJs
Python ORM框架SQLAlchemy学习笔记之关系映射实例
2014/06/10 Python
Python实现判断一行代码是否为注释的方法
2018/05/23 Python
基于Python+Appium实现京东双十一自动领金币功能
2019/10/31 Python
pytorch 实现tensor与numpy数组转换
2019/12/27 Python
Python统计学一数据的概括性度量详解
2020/03/03 Python
Django模板获取field的verbose_name实例
2020/05/19 Python
python 多线程共享全局变量的优劣
2020/09/24 Python
先进个人获奖感言
2014/01/24 职场文书
初二物理教学反思
2014/01/29 职场文书
简历里的自我评价范文
2014/02/24 职场文书
主持词开场白
2014/03/17 职场文书
志愿者宣传口号
2014/06/17 职场文书
公司门卫岗位职责范本
2014/07/08 职场文书
交通事故和解协议书
2014/09/25 职场文书
乡镇党建工作总结2015
2015/05/19 职场文书
2016年综治宣传月活动宣传标语口号
2016/03/16 职场文书