zoukankan      html  css  js  c++  java
  • jquery获取选中的文本和值

    jquery获取选中的文本和值


    1、说明

    (1)获取select下拉框选中的索引

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


    (2)获取select下拉框选中的值

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


    (3)获取select下拉框选中的文本

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


    2、实现源码

    <!DOCTYPE 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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jQuery获取选中的文本和值</title>
    <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 + "
    " + "获取select下拉框的值:" + selectVal + "
    " + "获取select下拉框的文本:" + selectText);
    		 });
    	});
    </script>
    </head>
    
    <body>
       <div id="select_val">
           <select id="selection">
                 <option 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 type="button" value="获取选中的文本和值" id="btn"/>
    </body>
    </html>
    

    3、实现结果

    (1)选中第一项



    (2)选中最后一项


  • 相关阅读:
    Django-model聚合查询与分组查询
    Django-model基础
    tempalte模板
    Nginx配置TCP请求转发
    使用python调用email模块发送邮件附件
    将txt文本转换为excel格式
    Linux系统
    Aws云服务EMR使用
    SHELL打印两个日期之间的日期
    02-模板字符串
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13314987.html
Copyright © 2011-2022 走看看