脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → 获取选中的文本和值

jquery获取选中的文本和值的方法

 更新时间：2014年07月08日 18:00:47   投稿：whsnow  
这篇文章主要介绍了jquery获取选中的文本和值的方法,需要的朋友可以参考下

1、说明

（1）获取select下拉框选中的索引

$("#selection").get(0).selectedIndex;

（2）获取select下拉框选中的值

$("#selection option:selected").val();

（3）获取select下拉框选中的文本

$("#selection option:selected").text();

2、实现源码

html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<HTML xmlns="http://www.w3.org/1999/xhtml"> 
<HEAD> 

<script type="text/javascript" src="../Documents/未命名站点 2/jquery-1.11.0.js"></script> 
<script type="text/javascript"> 
$(function(){ 
$("#btn").click(function(){ 
//获取select下拉框索引 
var index = $("#selection").get(0).selectedIndex; 
//获取select下拉框的值 
var selectVal = $("#selection option:selected").val(); 
//获取select下拉框的文本 
var selectText = $("#selection option:selected").text(); 
alert("获取select下拉框索引：" + index + "\n" + "获取select下拉框的值：" + selectVal + "\n" + "获取select下拉框的文本：" + selectText); 
}); 
}); 
</script> 

<DIV id=select_val> 
<SELECT id=selection> <OPTION selected value=0>鲤鱼</OPTION> <OPTION value=1>鳐鱼</OPTION> <OPTION value=2>鲶鱼</OPTION> <OPTION value=3>棒棒鱼</OPTION> <OPTION value=4>小姐鱼</OPTION> <OPTION value=5>红金花罗汉鱼</OPTION> <OPTION value=6>彩虹王罗汉鱼</OPTION> <OPTION value=7>泰金罗汉鱼</OPTION></SELECT> 
</DIV> 
<INPUT id=btn value=获取选中的文本和值 type=button>

3、实现结果

（1）选中第一项

（2）选中最后一项

相关文章

  • jQuery EasyUI提交表单验证

    jQuery EasyUI提交表单验证

    这篇文章主要介绍了jQuery EasyUI提交表单验证的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2016-07-07
  • jQuery validate插件功能与用法详解

    jQuery validate插件功能与用法详解

    这篇文章主要介绍了jQuery validate插件功能与用法,结合实例形式详细分析了jQuery validate插件的功能、参数、使用方法与相关注意事项,需要的朋友可以参考下
    2016-12-12
  • jQuery实现仿腾讯迷你首页选项卡效果代码

    jQuery实现仿腾讯迷你首页选项卡效果代码

    这篇文章主要介绍了jQuery实现仿腾讯迷你首页选项卡效果代码,可实现tab切换按钮的左右滑动显示及点击切换效果,涉及jQuery基于鼠标事件实现页面元素动态操作技巧,需要的朋友可以参考下
    2015-09-09
  • jquery常用函数与方法汇总

    jquery常用函数与方法汇总

    本篇文章给大家分享jquery常用的函数与方法，有需要的朋友一起来学习下
    2015-09-09
  • Jquery表单验证失败后不提交的解决方法

    Jquery表单验证失败后不提交的解决方法

    很多人可能都会遇到在调试的时候用了return了false，可为什么还会提交呢？这个问题我最近也碰到了，尝试了多次也没有用，后来终于发现了其中的问题，下面分享处理给大家，让同样遇到这个问题的朋友们能够看看，有需要的朋友们下面来一起看看吧。
    2016-10-10
  • 基于jQuery实现点击弹出层实例代码

    基于jQuery实现点击弹出层实例代码

    基于jquery实现点击链接弹出层效果，其基本实现原理是这样的：jquery操作DOM元素。对层样式的设置。将display:设置为none;让层隐藏；对jq点击弹出层相关知识感兴趣的朋友一起学习吧
    2016-01-01
  • jquery重复提交请求的原因浅析

    jquery重复提交请求的原因浅析

    jquery重复提交请求一般来说有两个原因，一是没有取消绑定；二是多次引用同一个js文件
    2014-05-05
  • 移动端jQuery修正Web页面滑动时div问题的两则实例

    移动端jQuery修正Web页面滑动时div问题的两则实例

    这篇文章主要介绍了移动端jQuery修正Web页面滑动时div问题的两则实例,分别针对顶部固定fixed不为0时滑动出现的闪动以及touchmove的受阻止的相关问题,需要的朋友可以参考下
    2016-05-05
  • jQuery实现可拖拽的许愿墙效果【附demo源码下载】

    jQuery实现可拖拽的许愿墙效果【附demo源码下载】

    这篇文章主要介绍了jQuery实现可拖拽的许愿墙效果,可实现拖拽图片与层叠显示功能,涉及jQuery插件的简单使用,并附带demo源码供读者下载参考,需要的朋友可以参考下
    2016-09-09
  • jquery实现的Accordion折叠面板效果代码

    jquery实现的Accordion折叠面板效果代码

    这篇文章主要介绍了jquery实现的Accordion折叠面板效果代码,通过jquery鼠标click事件操作页面元素样式动态变换实现手风琴折叠效果,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-09-09

最新评论