自定义的Select控件，在ie6下样式可能有点乱，脚本都经过测试，基于JQuery。
效果图：
元数据：
此元数据，可以自行创建，模板如下。type类型是根据此来创建不同类型的模板，items集合是用于渲染具体的数据，value用于隐藏域。
// JavaScript source code { "type":"checkbox", "items":[ { "text":"巴金","value":"0" }, { "text":"沈从文","value":"1" }, { "text":"藏獒","value":"2" }, { "text":"藏地密码","value":"3" }, { "text":"魔兽世界","value":"4" }, { "text":"JavaScript","value":"5" } ] }
<div id="con"></div>必须要有此父容器，用于渲染页面。
附上源码，不知道为什么，我笔记本上JQuery的ajax一直返回405，而原生方法则可以，不知道IIS出现了什么问题，如果有哪位大侠，知道，还希望留言帮忙解决下。
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="Result-Css/reset/reset-min.css" />
<style type="text/css">
.con {
width:90%; font-family:微软雅黑; font-size:12px; margin:0 auto; margin-top:30px;
}
.jsondisplay {
width:260px; float:left;
}
.val {
width:260px; border:1px solid #ccc; height:25px; color:#ccc;
}
.select {
width:50px; height:27px; background-color:#00ff90; float:left;
}
.eventListMous {
width:50px; height:27px; display:block; background-color:#00ff90;
}
.eventListMous:hover {
background-color:#0ff;
}
.option {
width:308px; position:absolute; top:57px; background:#fff; border-left:1px solid #ccc; border-bottom:1px solid #ccc; border-right:1px solid #ccc;
}
.tion {
width:308px; height:25px; line-height:25px; float:left;
}
.sure {
width:308px;height:30px; border-top:1px solid #ccc;float:left;line-height:30px;
}
.eventClose {
width:50px; height:30px; display:block; float:right;
}
.eventClose a {
width:50px; height:30px; display:block; background-color:#b6ff00; color:#fff; text-align:center; text-decoration:none;
}
.eventClose a:hover {
background-color:#ffd800;
}
.eventSure {
width:50px; height:30px; display:block; float:right; margin-right:10px;
}
.eventSure a {
width:50px; height:30px; display:block; background-color:#b6ff00; color:#fff;text-align:center;text-decoration:none;
}
.eventSure a:hover {
background-color:#ffd800;
}
.hover {
background-color:#0072BC; color:#fff;
}
</style>
<script type="text/javascript" src="JQuery-1.80.min.js"></script>
<script type="text/javascript">
function AJAX() {
if (typeof XMLHttpRequest != "undefined") {
return new XMLHttpRequest();
} else if (typeof ActiveXObject != "undefined") {
if (typeof arguments.callee.activeXString != "string") {
var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp"];
for (var i = 0, len = versions.length; i < len; i++) {
try {
var xhr = new ActiveXObject(versions[i]);
arguments.callee.activeXString = versions[i];
return xhr;
} catch (ex) {
}
}
}
return new ActiveXObject(arguments.callee.activeXString);
} else {
throw new Error("错误");
}
}
var eventSlid = true; //记录弹出与关闭
//Select自定义控件弹出按钮
var selbut = function () {
var $eventListSlid = $('#eventListSlid');
var $optionList = $('#optionCon');
var $tion = $('span.tion');
$eventListSlid.bind('click', function () {
if (eventSlid == true) {
$optionList.show();
eventSlid = false;
} else {
$optionList.hide();
eventSlid = true;
}
$tion.hover(function () {
$(this).addClass('hover');
}, function () {
$(this).removeClass('hover');
});
});
}
//取消按钮
var closebut = function () {
var $close = $('#close');
var $optionList = $('#optionCon');
$close.bind('click', function () {
if(eventSlid == false){
$optionList.hide();
eventSlid = true;
}
});
}
//确定按钮
var surebut = function () {
var valuealls = [];
var textalls = [];
var suredown = $('#suredown');
var bing = $('#bing');
var hid = $('#hid');
var optionCon = document.getElementById('optionCon');
var inputAlls = optionCon.getElementsByTagName('input');
var tionalls = $('span.tion');
var $optionList = $('#optionCon');
suredown.bind('click', function () {
for (var i = 0, len = inputAlls.length; i < len; i++) {
if (inputAlls[i].checked) {
valuealls.push(inputAlls[i].value);
textalls.push(tionalls.eq(i).text());
}
}
var bin = document.getElementById('bing');
var hideen = document.getElementById('hid');
if (bin.value != '') {
bin.value = ' ';
hideen.value = ' ';
}
bing.val(textalls.join(','));
hid.val(valuealls.join(','));
$optionList.hide();
eventSlid = true;
});
}
var domalls = []; //dom数据
var type = '';
$(function () {
var con = document.getElementById('con');
var xhr = new AJAX() ;
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
var cons = eval("(" + xhr.responseText + ")"); //如果有json2.js文件，那么可以用$.parseJSON()方法获取元数据
type = cons.type; //元数据type类型
var items = cons.items; //元数据items集合
//根据type类型渲染模板
domalls.push('<div class="jsondisplay"><input type="text" class="val" id="bing" /><input type="hidden" id="hid"/></div><div class="select"><a href="#" class="eventListMous" id="eventListSlid"></a></div><div class="option" id="optionCon">');
for (var a in items) {
var text = items[a].text;
var value = items[a].value;
switch (type) {
case "checkbox":
domalls.push('<span class="tion"><input type="' + type + '" name="box" class="boxed" value = "' + value + '"/>' + text + '</span>');
break;
case "radio":
domalls.push('<span class="tion"><input type="' + type + '" name="box" class="boxed" value = "' + value + '"/>' + text + '</span>');
break;
case "none":
domalls.push('<span class="tion">'+ text + '</span>');
break;
//case可以根据元数据type的类型，来生成相应的模板
}
}
domalls.push('<div class="sure"><span class="eventClose"><a href="#" id="close">取消</a></span><span class="eventSure"><a href="#" id="suredown">确定</a></span></div></div>');
var dom = domalls.join('');
con.innerHTML = dom;
var optionCon = document.getElementById('optionCon');
optionCon.style.display = 'none';
}
}
}
xhr.open("get", "data.js", false);
xhr.send(null);
selbut();
closebut();
surebut();
});
</script>
</head>
<body>
<!--根据元数据的属性，来加载相应的属性-->
<div id="con" class="con"></div>
</body>
</html>