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操作select大全
Apr 25 Javascript
ff chrome和ie下全局动态定位的异同及全局高度的取法
Jun 30 Javascript
Boostrap模态窗口的学习小结
Mar 28 Javascript
纯JS实现表单验证实例
Dec 24 Javascript
jquery 实时监听输入框值变化的完美方法(必看)
Jan 26 Javascript
jQuery Validate表单验证插件实现代码
Jun 08 jQuery
Vue组件化开发思考
Feb 02 Javascript
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
Feb 27 jQuery
layui 弹出删除确认界面的实例
Sep 06 Javascript
基于JS+HTML实现弹窗提示是否确认提交功能
Jun 17 Javascript
基于vue与element实现创建试卷相关功能(实例代码)
Dec 07 Vue.js
如何用JavaScript实现一个数组惰性求值库
May 05 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实现二分查找算法代码分享
2011/06/24 PHP
Zend Framework动作助手(Zend_Controller_Action_Helper)用法详解
2016/03/05 PHP
php中使用GD库做验证码
2016/03/31 PHP
将PHP的session数据存储到数据库中的代码实例
2016/06/24 PHP
ThinkPHP5.0框架控制器继承基类和自定义类示例
2018/05/25 PHP
PHP中PCRE正则解析代码详解
2019/04/26 PHP
可以文本显示的公告栏的js代码
2007/03/11 Javascript
Javascript &amp; DHTML 实例编程(教程)(三)初级实例篇1—上传文件控件实例
2007/06/02 Javascript
ajaxControlToolkit AutoCompleteExtender的用法
2008/10/30 Javascript
jquery 学习之二 属性 文本与值(text,val)
2010/11/25 Javascript
YUI Compressor压缩JavaScript原理及微优化
2013/01/07 Javascript
js将long日期格式转换为标准日期格式实现思路
2013/04/07 Javascript
JavaScript中关联原型链属性特性
2016/02/13 Javascript
js控制li的隐藏和显示实例代码
2016/10/15 Javascript
Angularjs根据json文件动态生成路由状态的实现方法
2017/04/17 Javascript
jsonp跨域请求详解
2017/07/13 Javascript
在vue中更换字体,本地存储字体非引用在线字体库的方法
2018/09/28 Javascript
JS实现动态星空背景效果
2019/11/01 Javascript
使用Vant完成DatetimePicker 日期的选择器操作
2020/11/12 Javascript
python dict.get()和dict['key']的区别详解
2016/06/30 Python
python中函数传参详解
2016/07/03 Python
Python如何为图片添加水印
2016/11/25 Python
基于Python __dict__与dir()的区别详解
2017/10/30 Python
如何在django中运行scrapy框架
2020/04/22 Python
Python建造者模式案例运行原理解析
2020/06/29 Python
adidas美国官网:adidas US
2016/09/21 全球购物
比驿:全球酒店比价网
2018/06/20 全球购物
小学新学期教师寄语
2014/01/18 职场文书
自动化毕业生专业自荐书范文
2014/02/04 职场文书
暑期培训心得体会
2014/09/02 职场文书
读群众路线的心得体会
2014/09/03 职场文书
经营场所使用证明
2015/06/19 职场文书
小学体育跳绳课教学反思
2016/02/16 职场文书
读《钢铁是怎样炼成的》有感:百炼方成钢
2019/11/05 职场文书
golang判断key是否在map中的代码
2021/04/24 Golang
html+css实现环绕倒影加载特效
2021/07/07 HTML / CSS