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 相关文章推荐
Sample script that displays all of the users in a given SQL Server DB
Jun 16 Javascript
jquery命令汇总,方便使用jquery的朋友
Jun 26 Javascript
禁止页面刷新让F5快捷键及右键都无效
Jan 22 Javascript
require.js深入了解 require.js特性介绍
Sep 04 Javascript
实现placeholder效果的方案汇总
Jun 11 Javascript
JavaScript中的Math.LOG2E属性使用详解
Jun 14 Javascript
js验证真实姓名与身份证号是否匹配
Oct 13 Javascript
基于jquery实现页面滚动到底自动加载数据的功能
Dec 19 Javascript
jQuery实现简单的点赞效果
May 29 Javascript
html中鼠标滚轮事件onmousewheel的处理方法
Nov 11 Javascript
Vue数据驱动模拟实现4
Jan 12 Javascript
pm2启动ssr失败的解决方法
Jun 29 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
COM in PHP (winows only)
2006/10/09 PHP
php5中date()得出的时间为什么不是当前时间的解决方法
2008/06/30 PHP
thinkPHP框架整合tcpdf插件操作示例
2018/08/07 PHP
PHP后台备份MySQL数据库的源码实例
2019/03/18 PHP
Laravel 中创建 Zip 压缩文件并提供下载的实现方法
2019/04/02 PHP
VS2008中使用JavaScript调用WebServices
2014/12/18 Javascript
JavaScript中的Primitive对象封装介绍
2014/12/31 Javascript
javascript实现避免页面按钮重复提交
2015/01/08 Javascript
动态加载jQuery的两种方法实例分析
2015/07/17 Javascript
用JS动态改变表单form里的action值属性的两种方法
2016/05/25 Javascript
JS简单设置下拉选择框默认值的方法
2016/08/20 Javascript
Vue监听事件实现计数点击依次增加的方法
2018/09/26 Javascript
对angular 实时更新模板视图的方法$apply详解
2018/10/09 Javascript
微信小程序点餐系统开发常见问题汇总
2019/08/06 Javascript
layer ui插件显示tips时,修改字体颜色的实现方法
2019/09/11 Javascript
vue实现直播间点赞飘心效果的示例代码
2019/09/20 Javascript
Javascript操作select控件代码实例
2020/02/14 Javascript
[01:45]2014DOTA2 TI预选赛预选赛 大神专访第二弹!
2014/05/20 DOTA
Python 中的with关键字使用详解
2016/09/11 Python
Python简单删除列表中相同元素的方法示例
2017/06/12 Python
python密码错误三次锁定(实例讲解)
2017/11/14 Python
python的unittest测试类代码实例
2017/12/07 Python
详解tensorflow载入数据的三种方式
2018/04/24 Python
python中bytes和str类型的区别
2019/10/21 Python
HTML5 form标签之解放表单验证、增加文件上传、集成拖放的使用方法
2013/04/24 HTML / CSS
Expedia马来西亚旅游网站:廉价酒店,度假村和航班预订
2016/07/26 全球购物
上课迟到检讨书100字
2014/01/11 职场文书
技术总监管理岗位职责
2014/03/09 职场文书
个人安全承诺书
2014/05/22 职场文书
建筑工程质量通病防治方案
2014/06/08 职场文书
工厂见习报告范文
2014/10/31 职场文书
关于召开会议的通知
2015/04/15 职场文书
党员电教片《信仰》心得体会
2016/01/15 职场文书
2016年第104个国际护士节活动总结
2016/04/06 职场文书
详细聊一聊mysql的树形结构存储以及查询
2022/04/05 MySQL
Java 中的 Lambda List 转 Map 的多种方法详解
2022/07/07 Java/Android