jquery实现自定义select表单 -

lzf0514

浏览: 108899 次
性别:
来自: 江西

最近访客更多访客>>

zhangyanwei_321

itChenEye

LinXin__

lxj1981a

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

jquery实现自定义select表单

博客分类：

css+xhtml
javascript

<!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></title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <style type="text/css">
        #userselect{ position:relative; width:183px;}
        #userselect span{ display:block;text-align:left; padding-left:5px;width:178px; height:31px;border:1px solid #CCC; line-height:31px; background:url("selectdot.gif") no-repeat right top; cursor:pointer;}
        #userselect ul{ position:absolute; left:0; top:33px; border:1px solid #CCC; margin:0; padding:0; list-style:none; width:100%;}
        #userselect li{text-align:left;margin:0; padding:0; padding-left:5px; list-style:none;cursor:pointer; line-height:24px; width:178px; background:#FFF;}
        #userselect li.hover{ color:#579BC3; background:#F2F2F2;}

    </style>
    <script type="text/javascript" src="tk.userselect.js"></script>
</head>
<body>

<div id="userselect"></div>
<script type="text/javascript">
    var datatest = {
        defaulttex: "--请选择--",
        selectname: "usersex", //slect表单name名
        selectvalue: "0", //slect表单value值
        data: [{
            optionstext: "男",
            values: "1"
            },
            {
                optionstext: "女",
                values: "2"
            }]
    };
    $("#userselect").userselect(datatest);
    </script>
</body>
</html>

//tk.userselect.js代码：

// JScript source code
/*
例子:
var datatest={
defaulttex: "---请选择---",
selectname: "userselect",//slect表单name名
selectvalue: "0",//slect表单value值
data: [{
optionstext: "下拉列表1",
values: "1"
},
{
optionstext: "下拉列表2",
values: "2"
}]

};
$("aaa").userselect(datatest);

*/
(function ($) {
    //初始化select
    var defaults = {
        defaulttex: "---请选择---",
        selectname: "userselect",
        selectvalue: "0",
        data: [{
            optionstext: "下拉列表1",
            values: "1"
        },
        {
            optionstext: "下拉列表2",
            values: "2"
        }]

    };

    $.fn.extend({
        userselect: function (options) {
            var selectdata = $.extend({}, defaults, options);
            _intselect(this, selectdata);
        }
    });

    _intselect = function (selectid, mydata) {

        var selecthtml = '<input name="' + mydata.selectname + '" type="hidden" data-value="' + mydata.defaulttex + '" value="' + mydata.selectvalue + '" /><span></span><ul style="display:none;">'
        for (var i = 0; i < mydata.data.length; i++) {
            selecthtml += '<li data-option="' + mydata.data[i].values + '">' + mydata.data[i].optionstext + '</li>';
        }
        selecthtml += '</ul>';
        selectid.append(selecthtml);
        selectid.children("span").text(selectid.children("input").attr("data-value"));

        selectid.children("span").bind("click", function (event) {
            selectid.children("ul").toggle();
            event.stopPropagation();
        });
        $(document).bind("click", function () {
            selectid.children("ul").hide();
        });

        selectid.children("ul").children().each(function (i) {
            $(this).bind("click", function () {
                selectid.children("span").text($(this).text());
                selectid.children("input").val($(this).attr("data-option"));
                selectid.children("input").attr("data-value", $(this).text());
                //alert(selectid.children("input").val());
            });
            $(this).hover(function () {
                $(this).addClass("hover");
            },
              function () {
                  $(this).removeClass("hover");
              }
            );

        });
    }

})(jQuery);

分享到：

常用JS代码大全 | jquery实现图片幻灯片切换代码

2011-09-06 19:09
浏览 892
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

安装NumPy教程-详细版: 附件是安装NumPy教程_详细版，文件绿色安全，请大家放心下载，仅供交流学习使用，无任何商业目的！

语音端点检测及其在Matlab中的实现.zip: 语音端点检测及其在Matlab中的实现.zip

C#文档打印程序Demo: 使用C#完成一般文档的打印，带有页眉，页脚文档打印，表格打印，打印预览等

DirectX修复工具-4-194985.zip: directx修复工具 DirectX修复工具(DirectX repair)是系统DirectX组件修复工具，DirectX修复工具主要是用于检测当前系统的DirectX状态，若发现异常情况就可以马上进行修复，非常快捷，使用效果也非常好。

Python手动实现人脸识别算法: 人脸识别的主要算法其核心算法是欧式距离算法使用该算法计算两张脸的面部特征差异，一般在0.6 以下都可以被认为是同一张脸人脸识别的主要步骤 1 获得人脸图片 2 将人脸图片转为128D的矩阵(这个也就是人脸特征的一种数字化表现) 3 保存人脸128D的特征到文件中 4 获取其他人脸转为128D特征通过欧式距离算法与我们保存的特征对比，如果差距在0.6以下就说明两张脸差距比较小

全国大学生信息安全竞赛知识问答-CISCN 题库.zip: ciscn 全国大学生信息安全竞赛知识问答-CISCN 题库.zip

JAVA+SQL离散数学题库管理系统(源代码+LW+外文翻译).zip: JAVA+SQL离散数学题库管理系统(源代码+LW+外文翻译)JAVA+SQL离散数学题库管理系统(源代码+LW+外文翻译)JAVA+SQL离散数学题库管理系统(源代码+LW+外文翻译)JAVA+SQL离散数学题库管理系统(源代码+LW+外文翻译)JAVA+SQL离散数学题库管理系统(源代码+LW+外文翻译)JAVA+SQL离散数学题库管理系统(源代码+LW+外文翻译)JAVA+SQL离散数学题库管理系统(源代码+LW+外文翻译)JAVA+SQL离散数学题库管理系统(源代码+LW+外文翻译)JAVA+SQL离散数学题库管理系统(源代码+LW+外文翻译)JAVA+SQL离散数学题库管理系统(源代码+LW+外文翻译)JAVA+SQL离散数学题库管理系统(源代码+LW+外文翻译)JAVA+SQL离散数学题库管理系统(源代码+LW+外文翻译)JAVA+SQL离散数学题库管理系统(源代码+LW+外文翻译)JAVA+SQL离散数学题库管理系统(源代码+LW+外文翻译)

strcmp函数应用.zip: strcmp函数应用.zip

蓝桥杯单片机第十一届国赛设计题试做: 蓝桥杯单片机第十一届国赛设计题试做

基于MATLAB的pca人脸识别.zip: 基于MATLAB的pca人脸识别.zip

520.html: 520.html

JAVA在线考试管理系统(源代码+LW+开题报告+外文翻译+英文文献+答辩PPT).zip: JAVA在线考试管理系统(源代码+LW+开题报告+外文翻译+英文文献+答辩PPT)

STR710的定时器编程C语言例子，开发环境为IAR EWARM。.zip: STR710的定时器编程C语言例子，开发环境为IAR EWARM。.zip

基于物品的协同过滤推荐算法(Python).zip: 协同过滤算法（Collaborative Filtering）是一种经典的推荐算法，其基本原理是“协同大家的反馈、评价和意见，一起对海量的信息进行过滤，从中筛选出用户可能感兴趣的信息”。它主要依赖于用户和物品之间的行为关系进行推荐。协同过滤算法主要分为两类：基于物品的协同过滤算法：给用户推荐与他之前喜欢的物品相似的物品。基于用户的协同过滤算法：给用户推荐与他兴趣相似的用户喜欢的物品。协同过滤算法的优点包括：无需事先对商品或用户进行分类或标注，适用于各种类型的数据。算法简单易懂，容易实现和部署。推荐结果准确性较高，能够为用户提供个性化的推荐服务。然而，协同过滤算法也存在一些缺点：对数据量和数据质量要求较高，需要大量的历史数据和较高的数据质量。容易受到“冷启动”问题的影响，即对新用户或新商品的推荐效果较差。存在“同质化”问题，即推荐结果容易出现重复或相似的情况。协同过滤算法在多个场景中有广泛的应用，如电商推荐系统、社交网络推荐和视频推荐系统等。在这些场景中，协同过滤算法可以根据用户的历史行为数据，推荐与用户兴趣相似的商品、用户或内容，从而提高用户的购买转化率、活跃度和社交体验。未来，协同过滤算法的发展方向可能是结合其他推荐算法形成混合推荐系统，以充分发挥各算法的优势。

JAVA文件传输(lw+源代码).zip: FTP（File Transfer Protocol）是文件传输协议的简称。 FTP的主要作用，就是让用户连接上一个远程计算机（这些计算机上运行着FTP服务器程序）查看远程计算机有哪些文件，然后把文件从远程计算机上拷到本地计算机，或把本地计算机的文件送到远程计算机去。目前FTP服务器软件都为国外作品，例如Server_U、IIS，国内成熟的FTP服务器软件很少，有一些如（Crob FTP Server），但从功能上看来远不能和那些流行的服务器软件媲美。

python项目源码-深度学习tensorflow的滚动轴承故障诊断方法源码（高分大作业）.rar: 本项目基于深度学习TensorFlow框架，针对滚动轴承故障诊断方法进行研究。项目采用了卷积神经网络（CNN）对轴承振动信号进行特征提取和分类，实现了对滚动轴承不同故障类型的自动诊断。在技术实现上，项目利用TensorFlow搭建了一个高效的CNN模型，通过多层卷积、池化操作以及全连接层，自动学习轴承振动信号中的故障特征。同时，采用交叉熵损失函数优化模型参数，提高故障识别率。此外，项目还集成了数据预处理、模型训练、测试评估等功能模块，方便用户快速上手并进行实验研究。经过运行测试，该项目代码运行稳定，诊断效果良好，可广泛应用于滚动轴承故障诊断领域。对于计算机相关专业的在校学生、老师或企业员工来说，该项目是一份难得的高分大作业资源，同时也是小白学习和实际项目借鉴的优秀参考资料。请放心下载使用，为您的学习和工作提供帮助！

超详细的SpringBoot框架入门教程 Spring Boot框架快速入门教程以大量示例讲解了Spring Boot在各类情境: 超详细的SpringBoot框架入门教程 Spring Boot框架快速入门教程以大量示例讲解了Spring Boot在各类情境中的应用，让大家可以跟着老师的思维和代码快速理解并掌握。适用于Java 开发人员，尤其是初学Spring Boot的人员和需要从传统 Spring 转向 Spring Boot 开发的技术人员。下边是动力节点的SpringBoot教程非常适合初学入门，讲的非常详细，而且全程无废话！

毕业设计[主机域名]ISPConfig 3.0.1.3_ispconfig3-codepub.zip: 毕业设计[主机域名]ISPConfig 3.0.1.3_ispconfig3-codepub.zip

matlab开发-用交叉熵优化多变量宏观模型随机多极值优化.zip: matlab开发-用交叉熵优化多变量宏观模型随机多极值优化.zip

矩阵特征值的计算方法.zip: 矩阵特征值的计算方法.zip

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jquery实现自定义select表单

评论

发表评论

相关推荐

在js文件中显示jquery的智能提示VS2010

英文强制自动换行

DIV+CSS布局中自适应两列等高的解决方法

关于浏览器内核的一些概念

介绍 10 个 CSS3 属性

将手机网站做成手机应用的JS框架

图片水平垂直居中

jquery实现无缝图片滚动

HTML Head 参数详解

IE6文字溢出BUG

div背景半透明，文字不透明

JS变量的作用域

图片延迟加载之随滚动条显示

三列等高。中间列优先

a空标签设成块元素后ie7不能点击

ie6支持position:fixed

jquery实现tab选项卡

常用JS代码大全

jquery实现图片幻灯片切换代码

js控制图片自动等比例缩放

最近访客更多访客>>