javascript获取select值的方法完整实例


Posted in Javascript onJune 20, 2019

本文实例讲述了javascript获取select值的方法。分享给大家供大家参考,具体如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>3water.com javascript获取select值</title>
</head>
<script>
  //javascript获取选中select值
  /*
    var obj = document.getElementById("testSelect"); //定位id
    var index = obj.selectedIndex; // 选中索引
    var text = obj.options[index].text; // 选中文本
    var value = obj.options[index].value; // 选中值
  */
  //jQuery获取选中select值
  /*
    $('#testSelect option:selected').text();//选中的文本
    $('#testSelect option:selected') .val();//选中的值
    $("#testSelect ").get(0).selectedIndex;//索引
  */
  window.onload=function() {
    var oBtn=document.getElementById("oBtn1");
    var oText=document.getElementById("oText1");
    var oSelect=document.getElementById("select1");
    var index=oSelect.selectedIndex ;
    oBtn.onclick=function() {
      alert(oSelect.options[index].text);
      if(oText.value==""){
        alert("请输入内容")
      }else{
        alert(oText.value+"----"+oSelect.options[oSelect.selectedIndex].text)
      }
    }
  }
</script>
<body>
<input id="oText1" type="text" value=""/>
<input id="oBtn1" type="button" value="按钮"/>
<select id="select1">
  <option value="1">广州</option>
  <option value="2">上海</option>
  <option value="3">北京</option>
</select>
</body>
</html>

运行结果:

javascript获取select值的方法完整实例

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题:《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
js玩一玩WSH吧
Feb 23 Javascript
JavaScript 对象模型 执行模型
Oct 15 Javascript
基于jQuery的左右滚动实现代码
Dec 03 Javascript
JQuery菜单效果的两个实例讲解(3)
Sep 17 Javascript
基于javascript制作经典传统的拼图游戏
Mar 22 Javascript
JavaScript编写点击查看大图的页面半透明遮罩层效果实例
May 09 Javascript
微信小程序本地缓存数据增删改查实例详解
May 24 Javascript
JavaScript编写棋盘覆盖代码详解
Aug 28 Javascript
详解使用Typescript开发node.js项目(简单的环境配置)
Oct 09 Javascript
jquery登录的异步验证操作示例
May 09 jQuery
微信小程序实现抖音播放效果的实例代码
Apr 11 Javascript
jQuery+ajax实现文件上传功能
Dec 22 jQuery
node基于async/await对mysql进行封装
Jun 20 #Javascript
JavaScrip数组去重操作实例小结
Jun 20 #Javascript
Vue 动态添加路由及生成菜单的方法示例
Jun 20 #Javascript
JavaScript命名空间模式实例详解
Jun 20 #Javascript
npm的lock机制解析
Jun 20 #Javascript
express如何解决ajax跨域访问session失效问题详解
Jun 20 #Javascript
JS去除字符串最后的逗号实例分析【四种方法】
Jun 20 #Javascript
You might like
php上传文件的增强函数
2010/07/21 PHP
PHP加Nginx实现动态裁剪图片方案
2014/03/10 PHP
从ThinkPHP3.2.3过渡到ThinkPHP5.0学习笔记图文详解
2019/04/03 PHP
JavaScript 联动的无限级封装类,数据采用非Ajax方式,随意添加联动
2010/06/29 Javascript
jQuery UI Datepicker length为空或不是对象错误的解决方法
2010/12/19 Javascript
通过JS获取用户本地图片路径并显示的代码
2012/02/16 Javascript
node.js中的path.resolve方法使用说明
2014/12/08 Javascript
JQuery中$.each 和$(selector).each()的区别详解
2015/03/13 Javascript
JavaScript中的this关键字使用方法总结
2015/03/13 Javascript
jQuery实现为图片添加镜头放大效果的方法
2015/06/25 Javascript
JS实现点击按钮控制Div变宽、增高及调整背景色的方法
2015/08/05 Javascript
妙用Bootstrap的 popover插件实现校验表单提示功能
2016/08/29 Javascript
nginx部署访问vue-cli搭建的项目的方法
2018/02/12 Javascript
关于redux-saga中take使用方法详解
2018/02/27 Javascript
nodejs的路径问题的解决
2018/06/30 NodeJs
wx-charts 微信小程序图表插件的具体使用
2019/08/18 Javascript
深入了解Vue.js 混入(mixins)
2020/07/23 Javascript
深入解读Python解析XML的几种方式
2016/02/16 Python
PyTorch的深度学习入门教程之构建神经网络
2019/06/27 Python
python实现两个dict合并与计算操作示例
2019/07/01 Python
python2和python3应该学哪个(python3.6与python3.7的选择)
2019/10/01 Python
详解pandas中iloc, loc和ix的区别和联系
2020/03/09 Python
python如何快速生成时间戳
2020/07/21 Python
HTML5新增的表单元素和属性实例解析
2014/07/07 HTML / CSS
three.js模拟实现太阳系行星体系功能
2019/09/03 HTML / CSS
美国领先的机场停车聚合商:Airport Parking Reservations
2020/02/28 全球购物
公共事业管理本科生求职信
2013/10/07 职场文书
蜜蜂引路教学反思
2014/02/04 职场文书
《毛主席在花山》教学反思
2014/04/20 职场文书
公司活动总结范文
2014/07/01 职场文书
119消防日活动总结
2014/08/29 职场文书
教师批评与自我批评剖析材料
2014/10/16 职场文书
个人股份合作协议书
2014/10/24 职场文书
法制教育观后感
2015/06/17 职场文书
Python+Pillow+Pytesseract实现验证码识别
2022/05/11 Python
Win10系统搭建ftp文件服务器详细教程
2022/08/05 Servers