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 单引号 传递方法
Jun 22 Javascript
jQuery ajax cache缓存问题
Jul 01 Javascript
创建js对象和js类的方法汇总
Dec 24 Javascript
Javascript中实现trim()函数的两种方法
Feb 04 Javascript
chrome调试javascript详解
Oct 21 Javascript
原生js实现class的添加和删除简单代码
Jul 12 Javascript
Bootstrap3 多选和单选框(checkbox)
Dec 29 Javascript
js实现图片360度旋转
Jan 22 Javascript
Bootstrap 3浏览器兼容性问题及解决方案
Apr 11 Javascript
JS设计模式之状态模式概念与用法分析
Feb 05 Javascript
Layui组件Table绑定行点击事件和获取行数据的方法
Aug 19 Javascript
ajax跨域访问遇到的问题及解决方案
May 23 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 删除一个目录及目录下的所有文件的函数代码
2010/05/26 PHP
实例简介PHP的一些高级面向对象编程的特性
2015/11/27 PHP
PHP用mysql_insert_id()函数获得刚插入数据或当前发布文章的ID
2016/11/25 PHP
基于jquery的模态div层弹出效果
2010/08/21 Javascript
jquery的键盘事件修改代码
2011/02/24 Javascript
基于jquery的使ListNav兼容中文首字拼音排序的实现代码
2011/07/10 Javascript
JavaScript如何从listbox里同时删除多个项目
2013/10/12 Javascript
jquery禁止输入数字以外的字符的示例(纯数字验证码)
2014/04/10 Javascript
第七章之菜单按钮图标组件
2016/04/25 Javascript
jquery实现跳到底部,回到顶部效果的简单实例(类似锚)
2016/07/10 Javascript
JS自定义混合Mixin函数示例
2016/11/26 Javascript
Angularjs 实现动态添加控件功能
2017/05/25 Javascript
js模拟百度模糊搜索的实例
2017/08/04 Javascript
在iframe中使bootstrap的模态框在父页面弹出问题
2017/08/07 Javascript
关于js的三种使用方式(行内js、内部js、外部js)的程序代码
2018/05/05 Javascript
详解Vue CLI3配置解析之css.extract
2018/09/14 Javascript
基于Ionic3实现选项卡切换并重新加载echarts
2020/09/24 Javascript
[26:52]LGD vs EG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python中for循环控制语句用法实例
2015/06/02 Python
Python的条件语句与运算符优先级详解
2015/10/13 Python
快速了解Python开发中的cookie及简单代码示例
2018/01/17 Python
python利用smtplib实现QQ邮箱发送邮件
2020/05/20 Python
详解python中的装饰器
2018/07/10 Python
python版大富翁源代码分享
2018/11/19 Python
Python 使用 attrs 和 cattrs 实现面向对象编程的实践
2019/06/12 Python
pandas 选取行和列数据的方法详解
2019/08/08 Python
移动端解决悬浮层(悬浮header、footer)会遮挡住内容的3种方法
2015/03/27 HTML / CSS
amazeui模态框弹出后立马消失并刷新页面
2020/08/19 HTML / CSS
英国在线汽车和面包车零件商店:Car Parts 4 Less
2018/08/15 全球购物
如何获取某个日期是当月的最后一天
2013/12/05 面试题
经典优秀毕业生求职信范文分享
2013/12/18 职场文书
总经理助理职责
2014/02/04 职场文书
3的组成教学反思
2014/04/30 职场文书
会计求职自荐信
2015/03/26 职场文书
2015年推普周活动总结
2015/03/27 职场文书
会议承办单位欢迎词
2015/09/30 职场文书