jquery实现自定义select表单 -

lzf0514

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

最近访客更多访客>>

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
浏览 887
评论(0)
分类:Web前端
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jquery实现自定义select表单

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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控制图片自动等比例缩放

最近访客更多访客>>