jquery实现自定义select表单
<!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);
