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 相关文章推荐
jquery之Document元素选择器篇
Aug 14 Javascript
checkbox设置复选框的只读效果不让用户勾选
Aug 12 Javascript
jquery如何扑捉回车键触发的事件
Apr 24 Javascript
一个JavaScript函数把URL参数解析成Json对象
Sep 24 Javascript
jQuery实现流动虚线框的方法
Jan 29 Javascript
纯javascript判断查询日期是否为有效日期
Aug 24 Javascript
微信开发 使用picker封装省市区三级联动模板
Oct 28 Javascript
bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法
May 25 Javascript
Javacript中自定义的map.js  的方法
Nov 26 Javascript
JS实现贪吃蛇游戏
Nov 15 Javascript
VUE项目axios请求头更改Content-Type操作
Jul 24 Javascript
vue.js click点击事件获取当前元素对象的操作
Aug 07 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中namespace use用法实例分析
2016/01/22 PHP
asp.net下利用js实现返回上一页的实现方法小集
2009/11/24 Javascript
js获取html参数及向swf传递参数应用介绍
2013/02/18 Javascript
jQuery循环动画与获取组件尺寸的方法
2015/02/02 Javascript
JS实现数组去重复值的方法示例
2017/02/18 Javascript
Vue如何引入远程JS文件
2017/04/20 Javascript
JS一个简单的注册页面实例
2017/09/05 Javascript
利用nginx + node在阿里云部署https的步骤详解
2017/12/19 Javascript
JavaScript常用截取字符串的三种方式用法区别实例解析
2018/05/15 Javascript
基于vue中keep-alive缓存问题的解决方法
2018/09/21 Javascript
vue+element加入签名效果(移动端可用)
2019/06/17 Javascript
VUE写一个简单的表格实例
2019/08/06 Javascript
解决vue-router路由拦截造成死循环问题
2020/08/05 Javascript
python字符串替换的2种方法
2014/11/30 Python
Python fileinput模块使用实例
2015/05/28 Python
Python三级目录展示的实现方法
2016/09/28 Python
Python利用operator模块实现对象的多级排序详解
2017/05/09 Python
Python读取mat文件,并保存为pickle格式的方法
2018/10/23 Python
PyQt5创建一个新窗口的实例
2019/06/20 Python
将Pytorch模型从CPU转换成GPU的实现方法
2019/08/19 Python
学生如何注册Pycharm专业版以及pycharm的安装
2020/09/24 Python
全陪导游欢迎词
2014/01/17 职场文书
《荷花》教学反思
2014/04/16 职场文书
放飞梦想演讲稿
2014/05/05 职场文书
职员竞岗演讲稿
2014/05/14 职场文书
希特勒经典演讲稿
2014/05/19 职场文书
责任胜于能力演讲稿
2014/05/20 职场文书
品牌服务方案
2014/06/03 职场文书
幼儿教师师德师风演讲稿
2014/08/22 职场文书
在职人员跳槽求职信
2015/03/20 职场文书
研讨会通知
2015/04/27 职场文书
大卫科波菲尔读书笔记
2015/06/30 职场文书
2016年第29个世界无烟日宣传活动总结
2016/04/06 职场文书
职场新人知识:如何制定一份合理的工作计划?
2019/09/11 职场文书
mysql性能优化以及配置连接参数设置
2022/05/06 MySQL
HTML静态页面获取url参数和UserAgent的实现
2022/08/05 HTML / CSS