今天小编给大家精心推荐个JQuery SELECT单选模拟教程，一起来看看过程究竟如何进行吧！喜欢还请点个赞哦~
基于jQueryJavaScriptLibrary v1.3.2 的单选模拟
(本文件是跟据 zhangjingwei 的JquerySelect(单选) 模拟插件 V1.3.4 修改而来的)
a. 修改的主要原因是，原来的zhangjingwei的模拟在显示方式上的问题。在跟文字交替出现时会出现错位。现将模拟DIV的display修改为inline方式。更自然的嵌入到文本行中。
b.在加载文件后自动转化样式名为commonselect 的select。简化调用
c.对select的onchange()事件的响应。以及宽度获取的小调整
jquery.select.js
代码如下:
/*
*
*/
= function(){
var selectId = $(this).attr(id);
var selectZindex = $(this).css(z-index);
var selectIndex = $(#+selectId+ select option).index($(#+selectId+ select )[0]);
$(#+selectId).append(divh4/h4span/spanulli/li/ul/div);
$(#+selectId+ div h4).empty().append($(#+selectId+ select ).text());
$(.dropselectbox).css("display", lock);
//取select的宽度 优先级 select样式中的宽度 - select自动的宽度 - 默认为60
var selectcssWidth = $(#+selectId+ select).css(width);
selectcssWidth = typeof(selectcssWidth) =="undefined" ？ 0 : parseInt((\,\)) +5 ;
var selectWidth = selectcssWidth ？ selectcssWidth : ( $(#+selectId+ select).width() 0 ？ $(#+selectId+ select).width() + 5 : 60);
$(#+selectId).css("margin-right",selectWidth);//修改偏移量
$(#+selectId+ div h4).css("width", selectWidth); //将原select的宽度赋值给生成的select（并不是h4的总宽度）
$(#+selectId+ div ul).css("width",selectWidth); //将h4的总宽度赋值给Ul
$(#+selectId+ select).hide();
$(#+selectId+ div).hover(function(){
$(#+selectId+ div h4).addClass("over");
$(#+selectId+ div span).addClass("over");
},function(){
$(#+selectId+ div h4).removeClass("over");
$(#+selectId+ div span).removeClass("over");
});
$(#+selectId)
.bind("focus",function(){
__clearSelectMenu();
$(#+selectId+ div h4).addClass("over");
$(#+selectId+ div span).addClass("over");
})
.bind("click",function(e){
//$(#value2).append(点击：+selectIndex+ br);
if($(#+selectId+ div ul).css("display") == lock){
__clearSelectMenu(selectId);
return false;
}else{
if ($.){__clearSelectMenu();}
$(#+selectId+ div h4).addClass("current");
$(#+selectId+ div span).addClass("over").addClass("current");
$(#+selectId+ div ul).show();
var selectZindex = $(this).css(z-index);
if ($. || $.){
$(.dropdown).removeClass(overclass);
}
$(#+selectId).addClass(overclass);
__setSelectValue(selectId);
varwindowspace = ($(window).scrollTop() + ) - $(this).offset().top;
var ulspace = $(#+selectId+ div ul).outerHeight(true);
var windowspace2 = $(this).offset().top - $(window).scrollTop() - ulspace;
if (windowspace ulspace && windowspace2 0) {
$(#+selectId+ div ul).css({top:-ulspace});
}else{
$(#+selectId+ div ul).css({top:$(#+selectId+ div h4).outerHeight(true)});
}
selectIndex = $(#+selectId+ div ul li).index($(.selectedli)[0]);
$(window).scroll(function(){
var windowspace = ($(window).scrollTop() + ) - $(#+selectId).offset().top;
var ulspace = $(#+selectId+ div ul).outerHeight(true);
if (windowspace ulspace) {
$(#+selectId+ div ul).css({top:-ulspace});
}else{
$(#+selectId+ div ul).css({top:$(#+selectId+ div h4).outerHeight(true)});
}
});
//响应鼠标点击选择
$(#+selectId+ div ul li).click(function(e){
selectIndex = $(#+selectId+ div ul li).index(this);
//$(#value2).append(鼠标点击：+selectIndex+ br);
$(#+selectId+ select)[0].selectedIndex = selectIndex;
$(#+selectId+ div h4).empty().append($(#+selectId+ select ).text());
__clearSelectMenu(selectId,selectZindex);
();
= true;
//SELECT onchange 事件
$(#+selectId+ select).change();
})
.hover(
function(){
$(#+selectId+ div ul li).removeClass("over");
$(this).addClass("over").addClass("selectedli");
selectIndex = $(#+selectId+ div ul li).index(this);
},
function(){
$(this).removeClass("over");
}
);
//End
};
();
})
.bind("mousewheel",function(){
//以后也许支持滚轮
/*$(#+selectId+ div ul li).hover(
function(){
return false;
},
function(){
return false;
}
);*/
})
.bind("dblclick", function(){
__clearSelectMenu();
return false;
})
.bind("keydown",function(e){
//var hotkeys = ;
$(this).bind(keydown,function(e){
if ( == 40 || == 38 || == 35 || == 36){
return false;
}
});
switch(){ //设置为true可给定case范围
case 9:
return true;
break;
case 13:
//enter
//$(#value2).append(按回车收到的值：+selectIndex+ br);
__clearSelectMenu();
break;
case 27:
//esc
__clearSelectMenu();
break;
case 33:
$(#+selectId+ div ul li).removeClass("over");
selectIndex = 0;
__keyDown(selectId,selectIndex);
break;
case 34:
$(#+selectId+ div ul li).removeClass("over");
selectIndex = ($(#+selectId+ select option).length - 1);
__keyDown(selectId,selectIndex);
break;
case 35:
$(#+selectId+ div ul li).removeClass("over");
selectIndex = ($(#+selectId+ select option).length - 1);
__keyDown(selectId,selectIndex);
break;
case 36:
$(#+selectId+ div ul li).removeClass("over");
selectIndex = 0;
__keyDown(selectId,selectIndex);
break;
case 38:
//up
//$(#value2).append(原始值：+selectIndex+ br);
$(#+selectId+ div ul li).removeClass("over");
if (selectIndex == 0){
selectIndex = 0;
}else{
selectIndex--;
};
//$(#value2).append(span向上改变的aa值：/span+selectIndex+ );
__keyDown(selectId,selectIndex);
break;
case 40:
//down
//$(#value2).append(传递过来的：+selectIndex+ );
$(#+selectId+ div ul li).removeClass("over");
if (selectIndex == ($(#+selectId+ select option).length - 1)){
selectIndex = $(#+selectId+ select option).length - 1;
}else{
selectIndex ++;
};
//$(#value2).append(span向下改变的aa值：/span+selectIndex+ );
__keyDown(selectId,selectIndex);
break;
/*case ((hotkeys 47 && hotkeys 59) || (hotkeys 64 && hotkeys 91) || (hotkeys 96 && hotkeys 123)):
//首字幕查询预留接口
//character = ()();
return false;
break;*/
default:
return false;
break;
};
})
.bind("blur",function(){
__clearSelectMenu(selectId,selectZindex);
return false;
});
//禁止选择
$(.dropselectbox).bind("selectstart",function(){
return false;
});
};
function __clearSelectMenu(selectId,selectZindex){
//$(#value2).append(移除焦点：+selectIndex+ br);
$(.dropselectbox ul).empty().hide();
$(.dropselectbox h4).removeClass("over").removeClass("current");
$(.dropselectbox span).removeClass("over");
$(#+selectId).removeClass(overclass);
}
function __setSelectValue(sID){
$(#+sID+ div ul).empty();
$.each($(#+sID+ select option), function(i){
$(#+sID+ div ul).append("li"+$(this).text()+"/li");
});
$(#+sID+ div h4).empty().append($(#+sID+ select ).text());
$(#+sID+ div ul li).eq($(#+sID+ select)[0].selectedIndex).addClass("over").addClass("selectedli");
}
function __keyDown(sID,selectIndex){
$(#+sID+ select)[0].selectedIndex = selectIndex;
$(#+sID+ div ul (++)).toggleClass("over");
$(#+sID+ div h4).empty().append($(#+sID+ select ).text());
//SELECT onchange 事件
$(#+sID+ select).change();
}
/* 自动调用 */
$(document).ready(function(){
var s = new Array();
var t = (\);
var j = 0;
for(var i=0;++){
if(t[i].className=="commonselect"){
s[j] = t[i];
j++;
}
}
if(j==0)return;
var k = m = null;
for(var i=0;++){
k = s[i].parentNode;
m = createDiv(k, i);
//s[i].replaceNode(m);
(,)
();
$(#selectbox+ i).sSelect();
}
function createDiv(p, i){
var div = (\);
= dropdown;
div.id = selectbox + i;
= ;
();
return div;
}
})
HTML应用
代码如下:
!DOCTYPE html PUBLIC "-//W3C//DTDXHTML1.0 Transitional//EN" ""
html xmlns=""
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
titleJQuery SELECT单选模拟/title
style type="text/css" bogus="1"
body,div,ul,h4,li {margin:0; padding:0; ; ; font-size:1;}
/*下拉列表select的commonselect样式 配合插件 */
/* select style */
.dropdown {*; ;}
.dropdown * {-;}
.dropselectbox{; }
.overclass{ } /* 对于IE下层定位问题的修正样式 */
.dropdown h4{;cursor:default; ; margin:0; Arial, Helvetica, sans-serif; 1px #AAA; background:#3B3936 ;color:#CEBC7E;;}
.dropdown {#;}
.dropdown {#;}
.dropdown div {display:none;; ; ;}
.dropdown span {;top:4px; ; () no-repeat center; ; ;}
.dropdown ul{;display:none;border:1px solid #AAA; background:#333;color:#8E867B;}
.dropdown ul li{# 12px/19px Arial, Helvetica, sans-serif;;}
.dropdown ul {#; color:#FFF;}
/* select style */
/* input style */
input.txt{ 1px #AAA; background:#3B3936 ;color:#CEBC7E; ;}
/style
script type="text/javascript" src="jquery132.js" src="jquery132.js"/script
script type="text/javascript" src="jquery.select.js" src="jquery.select.js"/script
/head
body
h1Jquery Select(单选) 模拟插件 V1.3.4/h1
form action="#" method="post"
类型：
select name="type"
option value=""/option
option value="男"类型男/option
option value="女"类型女/option
/select
性别:
select name="sex" onchange="alert();"
option value=""性别：/option
option value="男"男/option
option value="女"女/option
/select
input type="text" size="8" name="input"
input type="submit" value="提交表单" /
/form
/body
/html
可以参考这篇文档
