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 null和undefined区别分析
Oct 14 Javascript
原来Jquery.load的方法可以一直load下去
Mar 28 Javascript
jQuery实现用户注册的表单验证示例
Aug 28 Javascript
js修改原型的属性使用介绍
Jan 26 Javascript
Webwork 实现文件上传下载代码详解
Feb 02 Javascript
BootStrap智能表单实战系列(八)表单配置json详解
Jun 13 Javascript
AngularJS实现表单元素值绑定操作示例
Oct 11 Javascript
详解JS转换数值函数Number()、parseInt()、parseFloat()
Aug 24 Javascript
Vue render函数实战之实现tabs选项卡组件
Apr 22 Javascript
微信小程序开发之左右分栏效果的实例代码
May 20 Javascript
vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)
Mar 07 Javascript
Vant 在vue-cli 4.x中按需加载操作
Nov 05 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 命名空间实例说明
2011/01/27 PHP
ThinkPHP实现支付宝接口功能实例
2014/12/02 PHP
php UNIX时间戳用法详解
2017/02/16 PHP
Yii2第三方类库插件Imagine的安装和使用
2017/07/06 PHP
php实现快速对二维数组某一列进行组装的方法小结
2019/12/04 PHP
javascript 静态对象和构造函数的使用和公私问题
2010/03/02 Javascript
DOM Scripting中的图片切换[兼容Firefox]
2010/06/12 Javascript
jquery win 7透明弹出层效果的简单代码
2013/08/06 Javascript
jquery选择器大全 全面详解jquery选择器
2014/03/06 Javascript
让JavaScript的Alert弹出框失效的方法禁止弹出警告框
2014/09/03 Javascript
常用的jquery模板插件——jQuery Boilerplate介绍
2014/09/23 Javascript
js命名空间写法示例
2015/12/18 Javascript
js流动式效果显示当前系统时间
2016/05/16 Javascript
jquery 判断selection range 是否在容器中的简单实例
2016/08/02 Javascript
浅析vue component 组件使用
2017/03/06 Javascript
JS实现的Unicode编码转换操作示例
2017/04/28 Javascript
vue2+el-menu实现路由跳转及当前项的设置方法实例
2017/11/07 Javascript
Angular8 Http拦截器简单使用教程
2019/08/20 Javascript
微信小程序官方动态自定义底部tabBar的例子
2019/09/04 Javascript
微信小程序实现购物车功能
2020/11/18 Javascript
[03:02]安得倚天剑,跨海斩长鲸——中国军团出征DOTA2国际邀请赛
2018/08/14 DOTA
Python2和Python3.6环境解决共存问题
2018/11/09 Python
对python中if语句的真假判断实例详解
2019/02/18 Python
python提取log文件内容并画出图表
2019/07/08 Python
Python 控制终端输出文字的实例
2019/07/12 Python
TensorFlow实现保存训练模型为pd文件并恢复
2020/02/06 Python
python3处理word文档实例分析
2020/12/01 Python
Python用SSH连接到网络设备
2021/02/18 Python
J.Crew官网:美国知名休闲服装品牌
2017/05/19 全球购物
希腊品牌鞋类销售网站:epapoutsia.gr
2020/03/18 全球购物
商务英语专业毕业生自荐信
2013/11/05 职场文书
马云的职业生涯规划之路
2014/01/01 职场文书
开幕式邀请函
2015/01/31 职场文书
学习心理学心得体会
2016/01/22 职场文书
2019企业给员工的慰问信
2019/06/24 职场文书
pandas数值排序的实现实例
2021/07/25 Python