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 相关文章推荐
为数据添加append,remove功能
Oct 03 Javascript
jQuery 版本的文本输入框检查器Input Check
Jul 09 Javascript
基于jquery的页面划词搜索JS
Sep 14 Javascript
jQuery性能优化的38个建议
Mar 04 Javascript
js获取url中&quot;?&quot;后面的字串方法
May 15 Javascript
JQuery标签页效果实例详解
Dec 24 Javascript
vue-resouce设置请求头的三种方法
Sep 12 Javascript
关于redux-saga中take使用方法详解
Feb 27 Javascript
浅入深出Vue之组件使用
Jul 11 Javascript
JavaScript实现多个物体同时运动
Mar 12 Javascript
javascript实现放大镜功能
Dec 09 Javascript
vue 实现上传组件
May 31 Vue.js
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也可以?成Shell Script
2006/10/09 PHP
用PHP生成静态HTML速度快类库
2007/03/18 PHP
TP5框架安全机制实例分析
2020/04/05 PHP
jqPlot jquery的页面图表绘制工具
2009/07/25 Javascript
基于jQuery的的一个隔行变色,鼠标移动变色的小插件
2010/07/06 Javascript
zeroclipboard 单个复制按钮和多个复制按钮的实现方法
2014/06/14 Javascript
JavaScript简单获取页面图片原始尺寸的方法
2016/06/21 Javascript
AngularJS中关于ng-class指令的几种实现方式详解
2016/09/17 Javascript
JavaScript实现两个select下拉框选项左移右移
2017/03/09 Javascript
解决VUEX刷新的时候出现数据消失
2017/07/03 Javascript
javascript+html5+css3自定义弹出窗口效果
2017/10/26 Javascript
Bootstrap标签页(Tab)插件切换echarts不显示问题的解决
2018/07/13 Javascript
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
2018/08/09 jQuery
详解Vue结合后台的列表增删改案例
2018/08/21 Javascript
JQuery中queue方法用法示例
2019/01/31 jQuery
详解javascript中的Error对象
2019/04/25 Javascript
微信小程序API—获取定位的详解
2019/04/30 Javascript
微信小程序使用字体图标的方法
2019/05/23 Javascript
vue日历/日程提醒/html5本地缓存功能
2019/09/02 Javascript
Vue-cli4 配置 element-ui 按需引入操作
2020/09/11 Javascript
深入解析Python中的上下文管理器
2016/06/28 Python
解决Python pandas df 写入excel 出现的问题
2018/07/04 Python
Python做智能家居温湿度报警系统
2018/09/25 Python
Django rstful登陆认证并检查session是否过期代码实例
2019/08/13 Python
Python常用模块sys,os,time,random功能与用法实例分析
2020/01/07 Python
基于python爬取有道翻译过程图解
2020/03/31 Python
python获取系统内存占用信息的实例方法
2020/07/17 Python
Python3 ffmpeg视频转换工具使用方法解析
2020/08/10 Python
python爬取招聘要求等信息实例
2020/11/20 Python
html5指南-7.geolocation结合google maps开发一个小的应用
2013/01/07 HTML / CSS
C++面试题:关于链表和指针
2013/06/05 面试题
大专生简历的自我评价
2013/11/26 职场文书
四年的大学生生活自我评价
2013/12/09 职场文书
信电学院毕业生自荐书
2014/05/24 职场文书
迎新生欢迎词2015
2015/07/16 职场文书
2016幼儿教师自荐信范文
2016/01/28 职场文书