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之四(优雅的迭代)
Jun 20 Javascript
JavaScript中的style.display属性操作
Mar 27 Javascript
JS截取字符串常用方法整理及使用示例
Oct 18 Javascript
JS OffsetParent属性深入解析
Jan 13 Javascript
JavaScript中 this 指向问题深度解析
Feb 21 Javascript
bootstrap+spring boot实现面包屑导航功能(前端代码)
Oct 09 Javascript
Vue使用NProgress的操作过程解析
Oct 10 Javascript
微信小程序实现音乐播放器
Nov 20 Javascript
使用node.JS中的url模块解析URL信息
Feb 06 Javascript
VUE table表格动态添加一列数据,新增的这些数据不可以编辑(v-model绑定的数据不能实时更新)
Apr 03 Javascript
JS端基于download.js实现图片、视频时直接下载而不是打开预览
May 09 Javascript
使用 Opentype.js 生成字体子集的实例代码详解
May 25 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的FTP学习(二)
2006/10/09 PHP
php+mysqli实现将数据库中一张表信息打印到表格里的方法
2015/01/28 PHP
YII Framework框架教程之安全方案详解
2016/03/14 PHP
PHP创建对象的六种方式实例总结
2019/06/27 PHP
PHP设计模式之迭代器模式Iterator实例分析【对象行为型】
2020/04/26 PHP
IE bug table元素的innerHTML
2010/01/11 Javascript
JS鼠标事件大全 推荐收藏
2011/11/01 Javascript
JS代码同步文本框内容的实例方法
2013/07/12 Javascript
jQuery实现的输入框选择时间插件用法实例
2015/02/28 Javascript
jQuery选择器源码解读(一):Sizzle方法
2015/03/31 Javascript
关于js二维数组和多维数组的定义声明(详解)
2016/10/02 Javascript
JS实现用户注册时获取短信验证码和倒计时功能
2016/10/27 Javascript
利用jquery禁止外层滚动条的滚动
2017/01/05 Javascript
jQuery上传多张图片带进度条样式(DEMO)
2017/03/02 Javascript
详解Vue.js组件可复用性的混合(mixin)方式和自定义指令
2017/09/06 Javascript
ES6知识点整理之对象解构赋值应用示例
2019/04/17 Javascript
python通过urllib2爬网页上种子下载示例
2014/02/24 Python
Python搜索引擎实现原理和方法
2017/11/27 Python
Python的argparse库使用详解
2018/10/09 Python
在Pycharm中自动添加时间日期作者等信息的方法
2019/01/16 Python
浅谈Pycharm中的Python Console与Terminal
2019/01/17 Python
Python数据报表之Excel操作模块用法分析
2019/03/11 Python
python字典的常用方法总结
2019/07/31 Python
Python 在OpenCV里实现仿射变换—坐标变换效果
2019/08/30 Python
Pyecharts 中Geo函数常用参数的用法说明
2021/02/01 Python
html5桌面通知(Web Notifications)实例解析
2014/07/07 HTML / CSS
HTML5 Canvas中绘制矩形实例
2015/01/01 HTML / CSS
小橄榄树:Le Petit Olivier
2018/04/23 全球购物
C#如何调用Word并打开一个Word文档
2013/05/08 面试题
小学毕业感言150字
2014/02/05 职场文书
乡镇食品安全责任书
2014/07/28 职场文书
作风年建设汇报材料
2014/08/14 职场文书
乡镇领导班子四风对照检查材料
2014/09/27 职场文书
MySQL infobright的安装步骤
2021/04/07 MySQL
Android基于Fresco实现圆角和圆形图片
2022/04/01 Java/Android
Vue 打包后相对路径的引用问题
2022/06/05 Vue.js