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 时间显示效果代码
Aug 23 Javascript
jQuery EasyUI中对表格进行编辑的实现代码
Jun 10 Javascript
jQuery对象数据缓存Cache原理及jQuery.data方法区别介绍
Apr 07 Javascript
『jQuery』取指定url格式及分割函数应用
Apr 22 Javascript
浅谈Javascript实现继承的方法
Jul 06 Javascript
jQuery实现气球弹出框式的侧边导航菜单效果
Sep 22 Javascript
微信小程序“摇一摇”的实例代码
Jul 20 Javascript
详解Vue基于 Nuxt.js 实现服务端渲染(SSR)
Apr 05 Javascript
微信小程序实现滴滴导航tab切换效果
Jul 24 Javascript
layui 弹出层回调获取弹出层数据的例子
Sep 02 Javascript
微信小程序自定义navigationBar顶部导航栏适配所有机型(附完整案例)
Apr 26 Javascript
解决vue 使用axios.all()方法发起多个请求控制台报错的问题
Nov 09 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使用curl发送json格式数据实例
2013/12/17 PHP
20个最新的jQuery插件
2012/01/13 Javascript
offsetHeight在OnLoad中获取为0的现象
2013/07/22 Javascript
Javascript 按位与赋值运算符 (&amp;=)使用介绍
2014/02/04 Javascript
让JavaScript的Alert弹出框失效的方法禁止弹出警告框
2014/09/03 Javascript
javascript与css3动画结合使用小结
2015/03/11 Javascript
Node.js Sequelize如何实现数据库的读写分离
2016/10/23 Javascript
nodejs中使用HTTP分块响应和定时器示例代码
2017/03/19 NodeJs
Node.js中看JavaScript的引用
2017/04/22 Javascript
vue.js动态数据绑定学习笔记
2017/05/19 Javascript
BootStrap下的弹出框加载select2框架失败的解决方法
2017/08/31 Javascript
详解vue-cli官方脚手架配置
2018/07/20 Javascript
解决koa2 ctx.render is not a function报错问题
2018/08/07 Javascript
vue 解决form表单提交但不跳转页面的问题
2019/10/30 Javascript
Python logging模块学习笔记
2014/05/24 Python
使用Python抓取模板之家的CSS模板
2015/03/16 Python
python 字符串转列表 list 出现\ufeff的解决方法
2017/06/22 Python
Python matplotlib生成图片背景透明的示例代码
2019/08/30 Python
python基于celery实现异步任务周期任务定时任务
2019/12/30 Python
python利用tkinter实现图片格式转换的示例
2020/09/28 Python
解决virtualenv -p python3 venv报错的问题
2021/02/05 Python
美容师的职业规划书
2013/12/27 职场文书
大学生职业生涯规划范文
2013/12/31 职场文书
社区包粽子活动方案
2014/01/21 职场文书
幼儿教师培训感言
2014/03/08 职场文书
给校长的一封建议书
2014/03/12 职场文书
租赁协议书范本
2014/04/22 职场文书
小学生倡议书范文
2014/05/13 职场文书
学校爱国卫生月活动总结
2014/06/25 职场文书
山东省召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
产品质量保证书范本
2015/02/27 职场文书
英语辞职信怎么写
2015/02/28 职场文书
Apache压力测试工具的安装使用
2021/03/31 Servers
python使用openpyxl库读写Excel表格的方法(增删改查操作)
2021/05/02 Python
Python import模块的缓存问题解决方案
2021/06/02 Python
python绘制简单直方图(质量分布图)的方法
2022/04/21 Python