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解析与序列化json数据(三)json的解析探讨
Feb 01 Javascript
在页面加载完成后通过jquery给多个span赋值
May 21 Javascript
在页面中输出当前客户端时间javascript实例代码
Mar 02 Javascript
Jquery Easyui验证组件ValidateBox使用详解(20)
Dec 18 Javascript
详细讲解vue2+vuex+axios
May 27 Javascript
webpack实现热加载自动刷新的方法
Jul 30 Javascript
Vant的安装和配合引入Vue.js项目里的方法步骤
Dec 05 Javascript
详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法
Apr 07 Javascript
vue实现PC端分辨率适配操作
Aug 03 Javascript
js canvas实现俄罗斯方块
Oct 11 Javascript
微信小程序实现点赞业务
Feb 10 Javascript
JavaScript实现简单图片切换
Apr 29 Javascript
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无限级栏目分类读取的实现代码
2014/02/19 PHP
PHP实现求解最长公共子串问题的方法
2017/11/17 PHP
PHP7扩展开发之hello word实现方法详解
2018/01/15 PHP
javascript动画之圆形运动,环绕鼠标运动作小球
2010/07/20 Javascript
js页面滚动时层智能浮动定位实现(jQuery/MooTools)
2011/08/23 Javascript
上传的js验证(图片/文件的扩展名)
2013/04/25 Javascript
jQuery动态地获取系统时间实现代码
2013/05/24 Javascript
js中的setInterval和setTimeout使用实例
2014/05/09 Javascript
详解AngularJS中的依赖注入机制
2015/06/17 Javascript
jQuery实现html双向绑定功能示例
2017/10/09 jQuery
基于js原生和ajax的get和post方法以及jsonp的原生写法实例
2017/10/16 Javascript
JS定义函数的几种常用方法小结
2019/05/23 Javascript
生产制造追溯系统之再说条码打印
2019/06/03 Javascript
微信小程序批量监听输入框对按钮样式进行控制的实现代码
2019/10/12 Javascript
小程序实现长按保存图片的方法
2019/12/31 Javascript
extjs4图表绘制之折线图实现方法分析
2020/03/06 Javascript
vue实现评价星星功能
2020/06/30 Javascript
详解vue修改elementUI的分页组件视图没更新问题
2020/11/13 Javascript
python解析json实例方法
2013/11/19 Python
Python下的twisted框架入门指引
2015/04/15 Python
Python中获取对象信息的方法
2015/04/27 Python
Python读取文件内容的三种常用方式及效率比较
2017/10/07 Python
Python3 Random模块代码详解
2017/12/04 Python
python程序封装为win32服务的方法
2021/03/07 Python
对python中类的继承与方法重写介绍
2019/01/20 Python
浅谈PYTHON 关于文件的操作
2019/03/19 Python
详解Anconda环境下载python包的教程(图形界面+命令行+pycharm安装)
2019/11/11 Python
python小程序之4名牌手洗牌发牌问题解析
2020/05/15 Python
毕业生动漫设计求职信
2013/10/11 职场文书
知识竞赛主持词
2014/03/26 职场文书
大学生考试作弊检讨书
2014/09/21 职场文书
2015年公务员工作总结
2015/04/24 职场文书
商场圣诞节活动总结
2015/05/06 职场文书
背起爸爸上学观后感
2015/06/08 职场文书
狼牙山五壮士观后感
2015/06/09 职场文书
Java Spring读取和存储详细操作
2022/08/05 Java/Android