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判断是否已经弹出页面
Oct 20 Javascript
JavaScript获取元素尺寸和大小操作总结
Feb 27 Javascript
JavaScript使用cookie实现记住账号密码功能
Apr 27 Javascript
限制只能输入数字的实现代码
May 16 Javascript
AngularJS控制器详解及示例代码
Aug 16 Javascript
javascript操作cookie
Jan 17 Javascript
zTree异步加载展开第一级节点的实现方法
Sep 05 Javascript
React Native时间转换格式工具类分享
Oct 24 Javascript
js中getBoundingClientRect的作用及兼容方案详解
Feb 01 Javascript
微信小程序实现美团菜单
Jun 06 Javascript
JS中比较两个Object数组是否相等方法实例
Nov 11 Javascript
javascript实现支付宝滑块验证码效果
Jul 24 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
Zend Framework中的简单工厂模式 图文
2012/07/10 PHP
Thinkphp5结合layer弹窗定制操作结果页面
2017/07/07 PHP
ThinkPHP类似AOP思想的参数验证的实现方法
2019/12/18 PHP
插件:检测javascript的内存泄漏
2007/03/04 Javascript
js 跨域和ajax 跨域问题小结
2009/07/01 Javascript
js multiple全选与取消全选实现代码
2012/12/04 Javascript
JS实现完全语义化的网页选项卡效果代码
2015/09/15 Javascript
JavaScript实现的MD5算法完整实例
2016/02/02 Javascript
超实用的JavaScript表单代码段
2016/02/26 Javascript
Bootstrap中datetimepicker使用小结
2016/12/28 Javascript
微信小程序 页面之间传参实例详解
2017/01/13 Javascript
JS库之wow.js使用方法
2017/09/14 Javascript
自定义vue组件发布到npm的方法
2018/05/09 Javascript
详解Node.js amqplib 连接 Rabbit MQ最佳实践
2019/01/24 Javascript
浅谈发布订阅模式与观察者模式
2019/04/09 Javascript
Vue 解决多级动态面包屑导航的问题
2019/11/04 Javascript
Vue搭建后台系统需要注意的问题
2019/11/08 Javascript
python正则表达式去掉数字中的逗号(python正则匹配逗号)
2013/12/25 Python
利用Python和OpenCV库将URL转换为OpenCV格式的方法
2015/03/27 Python
快速入手Python字符编码
2016/08/03 Python
python寻找list中最大值、最小值并返回其所在位置的方法
2018/06/27 Python
在Python中使用gRPC的方法示例
2018/08/08 Python
python用post访问restful服务接口的方法
2018/12/07 Python
django 单表操作实例详解
2019/07/30 Python
Python 余弦相似度与皮尔逊相关系数 计算实例
2019/12/23 Python
HTML5标签嵌套规则详解【必看】
2016/04/26 HTML / CSS
Kaufmann Mercantile官网:家居装饰、配件、户外及更多
2018/09/28 全球购物
求职面试个人自我评价
2014/02/28 职场文书
上课随便讲话检讨书
2014/09/12 职场文书
四风问题个人剖析材料
2014/10/07 职场文书
2015共产党员公开承诺书
2015/01/22 职场文书
离婚答辩状范文
2015/05/22 职场文书
mongodb数据库迁移变更的解决方案
2021/09/04 MongoDB
解决使用了nginx获取IP地址都是127.0.0.1 的问题
2021/09/25 Servers
排查Tomcat进程假死的问题
2022/05/06 Servers
SpringCloud超详细讲解Feign声明式服务调用
2022/06/21 Java/Android