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 相关文章推荐
JScript中的undefined和&quot;undefined&quot;的区别
Mar 08 Javascript
javascript GUID生成器实现代码
Oct 31 Javascript
jquery自动完成插件(autocomplete)应用之PHP版
Dec 15 Javascript
js 父窗口控制子窗口的行为-打开,关闭,重定位,回复
Apr 20 Javascript
jquery animate实现鼠标放上去显示离开隐藏效果
Jul 21 Javascript
js判断字符长度及中英文数字等
Mar 19 Javascript
jquery制作多功能轮播图插件
Apr 02 Javascript
jQuery旋转木马式幻灯片轮播特效
Dec 04 Javascript
jQuery弹簧插件编写基础之“又见弹窗”
Dec 11 Javascript
详解react-native-fs插件的使用以及遇到的坑
Sep 12 Javascript
JavaScript事件对象深入详解
Dec 30 Javascript
Openlayers实现图形绘制
Sep 28 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
PHP4之真OO
2006/10/09 PHP
关于crontab的使用详解
2013/06/24 PHP
避免Smarty与CSS语法冲突的方法
2015/03/02 PHP
php三元运算符知识汇总
2015/07/02 PHP
PHP解压ZIP文件到指定文件夹的方法
2016/11/17 PHP
删除PHP数组中头部、尾部、任意元素的实现代码
2017/04/10 PHP
学习YUI.Ext 第三天
2007/03/10 Javascript
Javascript 鼠标移动上去小三角形滑块缓慢跟随效果
2013/04/26 Javascript
js鼠标点击图片切换效果实现代码
2015/11/19 Javascript
jQuery实现简单的文件上传进度条效果
2020/03/26 Javascript
微信小程序 wxapp内容组件 progress详细介绍
2016/10/31 Javascript
基于jQuery代码实现圆形菜单展开收缩效果
2017/02/13 Javascript
vue中post请求以a=a&amp;b=b 的格式写遇到的问题
2018/04/27 Javascript
Vue中的字符串模板的使用
2018/05/17 Javascript
工作中常用到的ES6语法
2018/09/04 Javascript
详解Webpack如何引入CDN链接来优化编译后的体积
2019/06/21 Javascript
JavaScript算法学习之冒泡排序和选择排序
2019/11/02 Javascript
NodeJS实现一个聊天室功能
2019/11/25 NodeJs
[04:48]DOTA2上海特锦赛小组赛第三日 TOP10精彩集锦
2016/02/28 DOTA
Python 调用DLL操作抄表机
2009/01/12 Python
跟老齐学Python之关于类的初步认识
2014/10/11 Python
深入理解Django-Signals信号量
2019/02/19 Python
pytorch 利用lstm做mnist手写数字识别分类的实例
2020/01/10 Python
一文了解python 3 字符串格式化 F-string 用法
2020/03/04 Python
python shapely.geometry.polygon任意两个四边形的IOU计算实例
2020/04/12 Python
python如何爬取网页中的文字
2020/07/28 Python
Python如何定义一个函数
2015/09/01 面试题
大学生演讲稿范文
2014/01/11 职场文书
初中物理教学反思
2014/01/14 职场文书
寄语十八大感言
2014/02/07 职场文书
幼儿园门卫岗位职责
2014/02/14 职场文书
公司租房协议书
2014/10/14 职场文书
公司借条范本
2015/05/25 职场文书
创业的9条正确思考方式
2019/08/26 职场文书
Nginx 匹配方式
2022/05/15 Servers
Python 读取千万级数据自动写入 MySQL 数据库
2022/06/28 Python