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 相关文章推荐
学习YUI.Ext 第六天--关于树TreePanel(Part 1)
Mar 10 Javascript
$.each与$().each的区别示例介绍
Mar 20 Javascript
js 动态为textbox添加下拉框数据源的方法
Apr 24 Javascript
JS判断是否360安全浏览器极速内核的方法
Jan 29 Javascript
js实现非常简单的焦点图切换特效实例
May 07 Javascript
详解vue组件化开发-vuex状态管理库
Apr 10 Javascript
JS实现按钮控制计时开始和停止功能
Jul 27 Javascript
JS实现简单短信验证码界面
Aug 07 Javascript
Express系列之multer上传的使用
Oct 27 Javascript
Vue中自定义全局组件的实现方法
Dec 08 Javascript
Vue.js自定义事件的表单输入组件方法
Mar 08 Javascript
vue项目中axios请求网络接口封装的示例代码
Dec 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
第十节--抽象方法和抽象类
2006/11/16 PHP
php smarty 二级分类代码和模版循环例子
2011/06/01 PHP
第4章 数据处理-php数组的处理-郑阿奇
2011/07/04 PHP
实例讲解PHP面向对象之多态
2014/08/20 PHP
destoon调用企业会员公司形象图片的实现方法
2014/08/21 PHP
PHP封装的MSSql操作类完整实例
2016/05/26 PHP
详解php与ethereum客户端交互
2018/04/28 PHP
php使用fputcsv实现大数据的导出操作详解
2020/02/27 PHP
jquery 的 $(&quot;#id&quot;).html() 无内容的解决方法
2010/06/07 Javascript
仅Firefox中链接A无法实现模拟点击以触发其默认行为
2011/07/31 Javascript
javascript重复绑定事件造成的后果说明
2013/03/02 Javascript
浅析JS刷新框架中的其他页面 &amp;&amp; JS刷新窗口方法汇总
2013/07/08 Javascript
JavaScript实现当网页加载完成后执行指定函数的方法
2015/03/21 Javascript
js以分隔符分隔数组中的元素并转换为字符串的方法
2016/11/16 Javascript
BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)
2016/12/01 Javascript
浅析Vue中method与computed的区别
2018/03/06 Javascript
bootstrap treeview 树形菜单带复选框及级联选择功能
2018/06/08 Javascript
教你如何编写Vue.js的单元测试的方法
2018/10/17 Javascript
javascript将扁平的数据转为树形结构的高效率算法
2020/02/27 Javascript
Vue组件模板及组件互相引用代码实例
2020/03/11 Javascript
Element Collapse 折叠面板的使用方法
2020/07/26 Javascript
Python实现发送QQ邮件的封装
2017/07/14 Python
Django原生sql也能使用Paginator分页的示例代码
2017/11/15 Python
Python中format()格式输出全解
2019/04/12 Python
Django使用中间键实现csrf认证详解
2019/07/22 Python
pytorch 图像预处理之减去均值,除以方差的实例
2020/01/02 Python
python日期与时间戳的各种转换示例
2020/02/12 Python
python中return不返回值的问题解析
2020/07/22 Python
海淘母婴商城:国际妈咪
2016/07/23 全球购物
加拿大女装网上购物:Reitmans
2016/10/20 全球购物
阿联酋航空官方网站:Emirates
2017/10/17 全球购物
C++面试题目
2013/06/25 面试题
WEB控件及HTML服务端控件能否调用客户端方法?如果能,请解释如何调用?
2015/08/25 面试题
贷款承诺书范文
2014/05/19 职场文书
中学生运动会新闻稿
2014/09/24 职场文书
python之json文件转xml文件案例讲解
2021/08/07 Python