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中URL编码函数代码
Jan 11 Javascript
使用基于jquery的gamequery插件做JS乒乓球游戏
Jul 31 Javascript
利用js动态添加删除table行的示例代码
Dec 16 Javascript
new Date()问题在ie8下面的处理方法
Jul 31 Javascript
node.js中的fs.read方法使用说明
Dec 17 Javascript
javascript实时显示北京时间的方法
Mar 12 Javascript
jquery实现简单文字提示效果
Dec 02 Javascript
全面介绍javascript实用技巧及单竖杠
Jul 18 Javascript
jQuery滚动监听实现商城楼梯式导航效果
Mar 06 Javascript
Javascript别踩白块儿(钢琴块儿)小游戏实现代码
Jul 20 Javascript
AngularJS实现自定义指令及指令配置项的方法
Nov 20 Javascript
解决Vue 浏览器后退无法触发beforeRouteLeave的问题
Dec 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
ASP和PHP实现生成网站快捷方式并下载到桌面的方法
2014/05/08 PHP
PHP简单获取网站百度搜索和搜狗搜索收录量的方法
2016/08/23 PHP
深入了解PHP中的Array数组和foreach
2016/11/06 PHP
thinkPHP5项目中实现QQ第三方登录功能
2017/10/20 PHP
PHP unlink与rmdir删除目录及目录下所有文件实例代码
2018/02/07 PHP
PHP pthreads v3下worker和pool的使用方法示例
2020/02/21 PHP
js创建对象的几种常用方式小结(推荐)
2010/10/24 Javascript
javascript window.confirm确认 取消对话框实现代码小结
2012/10/21 Javascript
jQuery中:first选择器用法实例
2014/12/30 Javascript
使用js画图之画切线
2015/01/12 Javascript
Jquery实现鼠标移动放大图片功能实例
2015/03/25 Javascript
Bootstrap每天必学之缩略图与警示窗
2015/11/29 Javascript
jQuery插件编写步骤详解
2016/06/03 Javascript
js 单引号替换成双引号,双引号替换成单引号的实现方法
2017/02/16 Javascript
Vue 2.5 Level E 发布了: 新功能特性一览
2017/10/24 Javascript
关于vue中的ajax请求和axios包问题
2018/04/19 Javascript
关于Vue组件库开发详析
2018/07/01 Javascript
axios的拦截请求与响应方法
2018/08/11 Javascript
angular2组件中定时刷新并清除定时器的实例讲解
2018/08/31 Javascript
Nuxt升级2.0.0时出现的问题(小结)
2018/10/08 Javascript
vue解决花括号数据绑定不成功的问题
2019/10/30 Javascript
js get和post请求实现代码解析
2020/02/06 Javascript
深入解读VUE中的异步渲染的实现
2020/06/19 Javascript
[03:30]DOTA2完美“圣”典精彩集锦
2016/12/27 DOTA
Python中unittest模块做UT(单元测试)使用实例
2015/06/12 Python
python django 访问静态文件出现404或500错误
2017/01/20 Python
深入理解Python分布式爬虫原理
2017/11/23 Python
python 不以科学计数法输出的方法
2018/07/16 Python
Python中py文件转换成exe可执行文件的方法
2019/06/14 Python
Python关键字及可变参数*args,**kw原理解析
2020/04/04 Python
Python接口测试数据库封装实现原理
2020/05/09 Python
canvas裁剪clip()函数的具体使用
2018/03/01 HTML / CSS
福克斯租车:Fox Rent A Car
2017/04/13 全球购物
大学生党员自我批评
2014/02/14 职场文书
入党培养人考察意见
2015/06/08 职场文书
详解JSON.parse和JSON.stringify用法
2022/02/18 Javascript