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 相关文章推荐
Array.slice()与Array.splice()的返回值类型
Oct 09 Javascript
js substr、substring和slice使用说明小记
Sep 15 Javascript
使用js dom和jquery分别实现简单增删改
Sep 11 Javascript
JavaScript知识点整理
Dec 09 Javascript
JavaScript动态插入CSS的方法
Dec 10 Javascript
js+flash实现的5图变换效果广告代码(附演示与demo源码下载)
Apr 01 Javascript
javascript表达式和运算符详解
Feb 07 Javascript
Vue组件中slot的用法
Jan 30 Javascript
react 不用插件实现数字滚动的效果示例
Apr 14 Javascript
JS运算符优先级与表达式示例详解
Sep 04 Javascript
JS前端基于canvas给图片添加水印
Nov 11 Javascript
JS如何监听div的resize事件详解
Dec 03 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
Apache, PHP在Windows 9x/NT下的安装与配置 (一)
2006/10/09 PHP
php中$_SERVER[PHP_SELF] 和 $_SERVER[SCRIPT_NAME]之间的区别
2009/09/05 PHP
利用Memcached在php下实现session机制 替换PHP的原生session支持
2010/08/21 PHP
[原创]php实现子字符串位置相互对调互换的方法
2016/06/02 PHP
第一个JavaScript入门基础 document.write输出
2010/02/22 Javascript
JavaScript实现的圆形浮动标签云效果实例
2015/08/06 Javascript
JS动态日期时间的获取方法
2015/09/28 Javascript
jquery捕捉回车键及获取checkbox值与异步请求的方法
2015/12/24 Javascript
js传值后台中文出现乱码的解决方法
2016/06/30 Javascript
浅析BootStrap中Modal(模态框)使用心得
2016/12/24 Javascript
基于$.ajax()方法从服务器获取json数据的几种方式总结
2018/01/31 Javascript
JavaScript实现写入文件到本地的方法【基于FileSaver.js插件】
2018/03/15 Javascript
通过jquery toggleClass()属性制作文章段落更改背景颜色
2018/05/21 jQuery
详解Vue 动态组件与全局事件绑定总结
2018/11/11 Javascript
微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例
2018/12/11 Javascript
[48:48]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS Dream TIME
2014/05/21 DOTA
举例讲解Python中装饰器的用法
2015/04/27 Python
Python中内置的日志模块logging用法详解
2016/07/12 Python
Python之列表实现栈的工作功能
2019/01/28 Python
详解Python网络框架Django和Scrapy安装指南
2019/04/01 Python
python 应用之Pycharm 新建模板默认添加编码格式-作者-时间等信息【推荐】
2019/06/17 Python
python实现五子棋小程序
2019/06/18 Python
python 导入数据及作图的实现
2019/12/03 Python
利用css3-animation实现逐帧动画效果
2016/03/10 HTML / CSS
AmazeUi Tree(树形结构) 应用小结
2020/08/17 HTML / CSS
Corelle官方网站:购买康宁餐具
2016/11/02 全球购物
澳大利亚拥有最好的家具和家居用品在线目的地:Nestz
2019/02/23 全球购物
大学生求职推荐信
2013/11/27 职场文书
大学生优秀团员事迹材料
2014/01/30 职场文书
致100米运动员广播稿
2014/02/14 职场文书
2014年清明节寄语
2014/04/03 职场文书
创先争优一句话承诺
2014/05/29 职场文书
廉政教育的心得体会
2014/09/01 职场文书
代领报检证委托书范本
2014/10/11 职场文书
Redis 中使用 list,streams,pub/sub 几种方式实现消息队列的问题
2022/03/16 Redis
python中字符串String及其常见操作指南(方法、函数)
2022/04/06 Python