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 :first选择器使用介绍
Aug 09 Javascript
jqueyr判断checkbox组的选中(示例代码)
Nov 08 Javascript
js获取当前地址 JS获取当前URL的示例代码
Feb 26 Javascript
js分页代码分享
Apr 28 Javascript
选择复选框按钮置灰否则按钮可用
May 22 Javascript
ECMAScript6新增值比较函数Object.is
Jun 12 Javascript
javascript Slip.js实现整屏滑动的手机网页
Nov 25 Javascript
微信小程序使用第三方库Underscore.js步骤详解
Sep 27 Javascript
jquery结合html实现中英文页面切换
Nov 29 Javascript
Angular 4依赖注入学习教程之Injectable装饰器(六)
Jun 04 Javascript
jQuery实现验证用户登录
Dec 10 jQuery
Ajax 的初步实现(使用vscode+node.js+express框架)
Jun 18 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
Windows PHP5和Apache的安装与配置
2009/06/08 PHP
php关于array_multisort多维数组排序的使用说明
2011/01/04 PHP
PHP5函数小全(分享)
2013/06/06 PHP
PHP消息队列用法实例分析
2016/02/12 PHP
浅析Yii2 GridView实现下拉搜索教程
2016/04/22 PHP
PHP魔术方法以及关于独立实例与相连实例的全面讲解
2016/10/18 PHP
php json相关函数用法示例
2017/03/28 PHP
js select常用操作控制代码
2010/03/16 Javascript
JQuery给元素绑定click事件多次执行的解决方法
2014/05/29 Javascript
浅谈JavaScript中的String对象常用方法
2015/02/25 Javascript
使用nodejs中httpProxy代理时候出现404异常的解决方法
2016/08/15 NodeJs
jQuery中将json数据显示到页面表格的方法
2018/05/27 jQuery
JavaScript实现动态添加、移除元素或属性的方法分析
2019/01/03 Javascript
webpack项目使用eslint建立代码规范实现
2019/05/16 Javascript
JavaScript常用内置对象用法分析
2019/07/09 Javascript
Vue SPA 首屏优化方案
2021/02/26 Vue.js
[01:12]DOTA2 2015年秋季互动指南
2015/11/10 DOTA
[59:42]Secret vs Alliacne 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python中最常用的操作列表的几种方法归纳
2015/04/24 Python
Python可变参数用法实例分析
2017/04/02 Python
python逐行读写txt文件的实例讲解
2018/04/03 Python
python3+PyQt5实现自定义窗口部件Counters
2018/04/20 Python
Atom的python插件和常用插件说明
2018/07/08 Python
用Python实现二叉树、二叉树非递归遍历及绘制的例子
2019/08/09 Python
pytorch中torch.max和Tensor.view函数用法详解
2020/01/03 Python
PyTorch中model.zero_grad()和optimizer.zero_grad()用法
2020/06/24 Python
Html5让容器充满屏幕高度或自适应剩余高度的布局实现
2020/05/14 HTML / CSS
德国运动营养和健身网上商店:Myprotein.de
2018/07/18 全球购物
Lentiamo比利时:便宜的隐形眼镜
2020/02/14 全球购物
介绍一下MYSQL常用的优化技巧
2012/10/25 面试题
人力资源管理毕业生自荐信
2013/11/21 职场文书
自我鉴定三原则
2014/01/13 职场文书
简历上的自我评价怎么写
2014/01/28 职场文书
2014离婚协议书范文
2014/09/10 职场文书
借款民事起诉状范文
2015/05/19 职场文书
导游词之山西关帝庙
2019/11/01 职场文书