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 相关文章推荐
javascript中使用正则计算中文长度的例子
Apr 29 Javascript
jquery.mobile 共同布局遇到的问题小结
Feb 10 Javascript
JavaScript创建一个object对象并操作对象属性的用法
Mar 23 Javascript
jQuery实现花式轮播之圣诞节礼物传送效果
Dec 25 Javascript
详解AngularJS通过ocLazyLoad实现动态(懒)加载模块和依赖
Mar 01 Javascript
Vue中建立全局引用或者全局命令的方法
Aug 21 Javascript
Angular中使用better-scroll插件的方法
Mar 27 Javascript
Angularjs Ng_repeat中实现复选框选中并显示不同的样式方法
Sep 12 Javascript
javacript replace 正则取字符串中的值并替换【推荐】
Sep 13 Javascript
微信小程序云开发如何使用云函数生成二维码
May 18 Javascript
koa router 多文件引入的方法示例
May 22 Javascript
Vue 自定义标签的src属性不能使用相对路径的解决
Sep 17 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
解析web文件操作常见安全漏洞(目录、文件名检测漏洞)
2013/06/29 PHP
基于PHP创建Cookie数组的详解
2013/07/03 PHP
zf框架的校验器InArray使用示例
2014/03/13 PHP
php用ini_get获取php.ini里变量值的方法
2015/03/04 PHP
WordPress自定义时间显示格式
2015/03/27 PHP
thinkPHP订单数字提醒功能的实现方法
2016/12/01 PHP
延时重复执行函数 lLoopRun.js
2007/05/08 Javascript
js 获取radio按钮值的实例
2013/08/17 Javascript
基于jquery的9行js轻松实现tab控件示例
2013/10/12 Javascript
利用JavaScript实现新闻滚动效果(实例代码)
2013/11/27 Javascript
查询json的数据结构的8种方式简介
2014/03/10 Javascript
Javascript访问器属性实例分析
2014/12/30 Javascript
浅谈JavaScript中setInterval和setTimeout的使用问题
2015/08/01 Javascript
jQuery控制li上下循环滚动插件用法实例(附demo源码下载)
2016/05/28 Javascript
JS弹出新窗口被拦截的解决方法
2016/08/09 Javascript
jquery ui sortable拖拽后保存位置
2017/04/27 jQuery
VUE2实现事件驱动弹窗示例
2017/10/21 Javascript
javascript变量提升和闭包理解
2018/03/12 Javascript
[01:05:41]EG vs Optic Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
Python functools模块学习总结
2015/05/09 Python
python基于urllib实现按照百度音乐分类下载mp3的方法
2015/05/25 Python
Python线程详解
2015/06/24 Python
Python实现的视频播放器功能完整示例
2018/02/01 Python
Python中将dataframe转换为字典的实例
2018/04/13 Python
Python使用pydub库对mp3与wav格式进行互转的方法
2019/01/10 Python
Python-numpy实现灰度图像的分块和合并方式
2020/01/09 Python
解决Django Haystack全文检索为空的问题
2020/05/19 Python
终于搞懂了Keras中multiloss的对应关系介绍
2020/06/22 Python
加拿大时尚床上用品零售商:QE Home | Quilts Etc
2018/01/22 全球购物
亚马逊巴西站:Amazon.com.br
2019/09/22 全球购物
法律专业个人实习自我鉴定
2013/09/23 职场文书
学生宿舍管理制度
2014/01/30 职场文书
公证书标准格式
2014/04/10 职场文书
酒店工程部岗位职责
2015/02/12 职场文书
基层党建工作简报
2015/07/21 职场文书
详解Laravel制作API接口
2021/05/31 PHP