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)选中最后一项


  • 相关阅读:
    作业,注册页面
    HTML表单
    用HTML制作简历
    多线程同步标记
    集合类
    多态 接口
    java 泛型讲解
    转型
    使用super关键字
    作业题
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13314987.html
Copyright © 2011-2022 走看看