select自己定义属性值

1、问题背景

下拉框能够传递值和内容，只是有时为了传值，还须要连带其它的值也一起传过来。假设用title属性。鼠标移到下拉框上方会显示出来，这样就会导致被暴露出来。所以，为了安全和传值方便。能够利用自己定义属性。

2、实现源代码

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <base href="<%=basePath%>">

    <title>自己定义下拉框属性值</title>

	<meta http-equiv="pragma" content="no-cache">

	<meta http-equiv="cache-control" content="no-cache">

	<meta http-equiv="expires" content="0">

	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

	<meta http-equiv="description" content="This is my page">

	<script type="text/javascript" src="<%=basePath%>/js/jquery-2.2.3.js"></script>

    <script type="text/javascript">

        $(function(){

         	$("#sel").change(function(){

         		var sel = $("#sel option:selected").val();

         		var name = $("#sel option:selected").text();

         		var child = $("#sel option:selected").attr("child");

         		alert("下拉框的值："+sel+"\n"+"下拉框的内容："+name+"\n"+"下拉框属性值child："+child);

         	});

        });

    </script>

  </head>

  <body>

     <div id="div-select">

        <select id="sel" style="width:200px;">

            <option value="1" child="2016010101">篮球</option>

            <option value="2" child="2016010102">足球</option>

            <option value="3" child="2016010103">铅球</option>

            <option value="4" child="2016010104">羽毛球</option>

            <option value="5" child="2016010105">乒乓球</option>

            <option value="6" child="2016010106">网球</option>

        </select>

     </div>

  </body>

</html>

3、实现结果

select自己定义属性值的更多相关文章

  1. 随手记一次用C#正则表达式获取下拉菜单html标签<select>以及相关属性值

    随手记一次用C#正则表达式获取下拉菜单html标签<select>以及相关属性值 1:有如下html: .................. <select id="aaa ...

  2. C# 如何定义让PropertyGrid控件显示[...]按钮，并且点击后以下拉框形式显示自定义控件编辑属性值

    关于PropertyGrid控件的详细用法请参考文献: 1.C# PropertyGrid控件应用心得 2.C#自定义PropertyGrid属性 首先定义一个要在下拉框显示的控件: using Sy ...

  3. （五）带属性值的ng-app指令，实现自己定义模块的自己主动载入

    如今我们看下怎样使用带属性值的ng-app命令,让ng-app自己主动载入我们自己定义的模块作为根模块. <!DOCTYPE html> <html> <head> ...

  4. MVC验证05-自定义验证规则、验证2个属性值不等

    原文:MVC验证05-自定义验证规则.验证2个属性值不等 本文体验2个属性值不等.即当一个属性输入值,另外一个属性输入的值不能和第一个属性值相等.相关文章包括: MVC验证01-基础.远程验证   M ...

  5. 点击select下拉框获取option的属性值

    select下拉框作为前端开发者应该是经常使用的,最近在项目中遇到这样的情况,点击下拉框选项,需要获取所点击的option的属性值,当时想很简单啊,给option加一个点击事件不就行了,然后就加了一下 ...

  6. 定义一个Person类,其中包括:1.定义属性:姓名、年龄、民族作为成员变量。定义静态成员变量：人数2.定义构造方法：对成员变量进行初始化。3.定义多个方法：分别显示相应的属性值，例如getName(){System.out.print("名称="+name+"；"); }4.定义一个方法“成长”：实现年龄的增加，每执行一次年龄增加1

    题目显示不全,完整题目描述: (1)定义一个Person类,其中包括:1.定义属性:姓名:年龄:民族作为成员变量.定义静态成员变量:人数2.定义构造方法:对成员变量进行初始化.3.定义多个方法:分别显 ...

  7. bootstrapValidator验证的remote中data属性里获取select一直是默认值

    budgetEditionNo:{ message:'版本号输入不正确' , validators:{ notEmpty:{ message:'版本号不能为空,请填写' } , remote:{ ur ...

  8. 11月8日下午Jquery取属性值（复选框、下拉列表、单选按钮）、做全选按钮、JSON存储、去空格

    1.jquery取复选框的值 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

  9. jQuery取复选框值、下拉列表里面的属性值、取单选按钮的属性值、全选按钮、JSON存储、*去空格

    1.jquery取复选框的值<!--引入jquery包--> <script src="../jquery-1.11.2.min.js"></scri ...

随机推荐

  1. 使用python读取mysql数据库并进行数据的操作

    (一)环境的配置 使用python调用mysql数据库要引进一些库. 目前我使用的python版本是python3.6.引进库为pymysql 其他对应的库可以有以下选择: mysqldb,oursq ...

  2. typedef函数用法

    转载自:http://www.cnblogs.com/ggjucheng/archive/2011/12/27/2303238.html 引言 typedef 声明,简称 typedef,为现有类型创 ...

  3. linux中shell变量$#,$@,$0,$1,$2

    linux中shell变量$#,$@,$0,$1,$2的含义解释: 变量说明: $$ Shell本身的PID(ProcessID) $! Shell最后运行的后台Process的PID $? 最后运行 ...

  4. 汕头市队赛 SRM 07 C 整洁的麻将桌

    C 整洁的麻将桌 SRM 07 背景&&描述 天才麻将少女KPM立志要在日麻界闯出一番名堂.     KPM上周双打了n场麻将,但她这次没控分,而且因为是全民参与的麻将大赛,所以她的名 ...

  5. ie下，jquery为动态添加的节点添加事件，用live

    jQuery向动态生成的内容添加事件响应 jQuery live() 方法详解 [收藏] 发布时间:2013-07-24 点击次数:176 来源:www.daimajiayuan.com jQuery ...

  6. (二十)linux中i2c的ioctl,write,read函数的使用

    一.ioctl函数的使用:原型:struct ioctl(struct file *file,unsigned int cmd,unsigned long arg);cmd有I2C_SLAVE,I2C ...

  7. Linux查看进程堆栈信息命令

    jps -lvm #查看进程IDjstack -l <进程ID> # 查看进程堆栈信息

  8. HTML5初学笔记

    今天学习了下HTML5的基本知识,用画笔在画布上画了几个东西,效果如图,相关代码如下,注意点总结在末尾: <!DOCTYPE html> <html> <head> ...

  9. python--enum

    # enum用于枚举,该模块下有一个Enum,我们定义的类要继承它 # 一旦继承,那么我们定义的key(仮),不能有重复值. # 如果要保证value(仮)不重复,那就引入unique,给我们定义的类 ...

  10. CSS控制图片显示区域

    优化页面响应速度,减少页面向服务端请求图片次数,有时候可能会将多个小图合并到一张图中,用的时候通过css控制显示的区域,比如:上传一张人物图片到服务器检测人脸,最后在页面上列出所有识别出来的人脸,实现 ...