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 相关文章推荐
建立良好体验度的Web注册系统ajax
Jul 09 Javascript
用js 让图片在 div或dl里 居中,底部对齐
Jan 21 Javascript
IE6与IE7中,innerHTML获取param的区别
Mar 15 Javascript
限制文本框输入N个字符的js代码
May 13 Javascript
jquery利用ajax调用后台方法实例
Aug 23 Javascript
Javascript检查图片大小不要让大图片撑破页面
Nov 04 Javascript
javascript实现带节日和农历的日历特效
Feb 01 Javascript
Bootstrap 组件之按钮(二)
May 11 Javascript
ES6概念 ymbol.for()方法
Dec 25 Javascript
AngularJS使用angular.bootstrap完成模块手动加载的方法分析
Jan 19 Javascript
详解VUE单页应用骨架屏方案
Jan 17 Javascript
layui-table获得当前行的上/下一行数据的例子
Sep 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
隐藏X-Space个人空间下方版权方法隐藏X-Space个人空间标题隐藏X-Space个人空间管理版权方法
2007/02/22 PHP
php下过滤html代码的函数 提高程序安全性
2010/03/02 PHP
PHP中的cookie不用刷新就生效的方法
2012/02/04 PHP
在windows服务器开启php的gd库phpinfo中未发现
2013/01/13 PHP
php分页代码学习示例分享
2014/02/20 PHP
ThinkPHP中的关联模型注意点
2014/06/16 PHP
php中JSON的使用方法
2015/04/30 PHP
Array.slice()与Array.splice()的返回值类型
2006/10/09 Javascript
javascript-TreeView父子联动效果保持节点状态一致
2007/08/12 Javascript
8个超棒的学习 jQuery 的网站 推荐收藏
2011/04/02 Javascript
ExtJS中文乱码之GBK格式编码解决方案及代码
2013/01/20 Javascript
借助javascript代码判断网页是静态还是伪静态
2014/05/05 Javascript
jquery 取子节点及当前节点属性值的方法
2014/08/24 Javascript
AngularJS $http模块POST请求实现
2017/04/08 Javascript
解决JS外部文件中文注释出现乱码问题
2017/07/09 Javascript
vue双花括号的使用方法 附练习题
2017/11/07 Javascript
详解JavaScript基础知识(JSON、Function对象、原型、引用类型)
2018/01/16 Javascript
详解vue之自行实现派发与广播(dispatch与broadcast)
2021/01/19 Vue.js
python使用循环实现批量创建文件夹示例
2014/03/25 Python
python中__call__内置函数用法实例
2015/06/04 Python
Python实现的求解最小公倍数算法示例
2018/05/03 Python
Python将文本去空格并保存到txt文件中的实例
2018/07/24 Python
Python批量生成幻影坦克图片实例代码
2019/06/04 Python
Python GUI学习之登录系统界面篇
2019/08/21 Python
python 图像插值 最近邻、双线性、双三次实例
2020/07/05 Python
玩具反斗城天猫官方旗舰店:享誉全球的玩具店
2017/10/10 全球购物
现代生活方式的家具和装饰:Dot & Bo
2018/12/26 全球购物
社区工作者思想汇报
2014/01/13 职场文书
中餐厅经理岗位职责
2014/04/11 职场文书
大学生志愿者活动总结
2014/06/27 职场文书
小学生植树节活动总结
2014/07/04 职场文书
礼仪培训心得体会
2016/01/22 职场文书
情况说明书格式及范文
2019/06/24 职场文书
MySQL中distinct和count(*)的使用方法比较
2021/05/26 MySQL
windows11怎么查看wifi密码? win11查看wifi密码的技巧
2021/11/21 数码科技
MySQL中EXPLAIN语句及用法
2022/05/20 MySQL