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);