Drop-Down list
by Nidhi Soni
HTML
<select name="country_id" id="country_id" tabindex="1">
<option value="">Search </option>
<option value="1">USA</option>
<option value="9">Canada</option>
<option value="2">France</option>
<option value="3">Spain</option>
<option value="6">Bulgaria</option>
</select>CSS
@CHARSET "UTF-8";
.sbHolder{
background-color: #F3F3F3;
border: 1px solid #CFCFCF;
font-family: Arial,sans-serif;
font-size: 12px;
font-weight: normal;
height: 29px;
position: relative;
width: 260px;
border-radius:5px;
}
.sbHolder:focus .sbSelector{
}
.sbSelector{
display: block;
height: 30px;
left: 0;
line-height: 30px;
outline: none;
overflow: hidden;
position: absolute;
text-indent: 10px;
top: 0;
width: 170px;
}
.sbSelector:link, .sbSelector:visited, .sbSelector:hover{
color: #7d7d7d;
outline: none;
text-decoration: none;
font-size:14px;
}
.sbToggle{
background: url(http://oi59.tinypic.com/warg3o.jpg) 0 -116px no-repeat;
display: block;
height: 30px;
outline: none;
position: absolute;
right: 0;
top: 0;
width: 30px;
}
.sbToggle:hover{
background: url(http://oi59.tinypic.com/warg3o.jpg) 0 -167px no-repeat;
}
.sbToggleOpen{
background: url(http://oi59.tinypic.com/warg3o.jpg) 0 -16px no-repeat;
}
.sbToggleOpen:hover{
background: url(http://oi59.tinypic.com/warg3o.jpg) 0 -66px no-repeat;
}
.sbHolderDisabled{
background-color: #3C3C3C;
border: solid 1px #515151;
}
.sbHolderDisabled .sbHolder{
}
.sbHolderDisabled .sbToggle{
}
.sbOptions{
background-color: #F3F3F3;
border: 1px solid #CFCFCF;
list-style: none outside none;
left: -1px;
margin: 0px;
padding: 0px;
position: absolute;
top: 30px;
width: 260px;
z-index: 1;
overflow-y: auto;
}
.sbOptions li{
padding: 0px 7px;
border-bottom: 1px solid #DEDEDE;
border-top: 1px solid #FDFDFD;
}
.sbOptions li:hover{
background:#dfdfdf;
}
.sbOptions a{
display: block;
outline: none;
padding: 7px 0 7px 3px;
}
.sbOptions a:link, .sbOptions a:visited{
color: #656565;
text-decoration: none;
font-size:12px;
}
.sbOptions a:hover,
.sbOptions a:focus,
.sbOptions a.sbFocus{
color: #7d7d7d;
}
.sbOptions li.last a{
border-bottom: none;
}
.sbOptions .sbDisabled{
border-bottom: dotted 1px #515151;
color: #999;
display: block;
padding: 7px 0 7px 3px;
}
.sbOptions...JavaScript
(function ($, undefined) {
var PROP_NAME = 'selectbox',
FALSE = false,
TRUE = true;
function Selectbox() {
this._state = [];
this._defaults = {
classHolder: "sbHolder",
classHolderDisabled: "sbHolderDisabled",
classSelector: "sbSelector",
classOptions: "sbOptions",
classGroup: "sbGroup",
classSub: "sbSub",
classDisabled: "sbDisabled",
classToggleOpen: "sbToggleOpen",
classToggle: "sbToggle",
classFocus: "sbFocus",
speed: 200,
effect: "slide",
onChange: null,
onOpen: null,
onClose: null
};
}
$.extend(Selectbox.prototype, {
_isOpenSelectbox: function (target) {
if (!target) {
return FALSE;
}
var inst = this._getInst(target);
return inst.isOpen;
},
_isDisabledSelectbox: function (target) {
if (!target) {
return FALSE;
}
var inst = this._getInst(target);
return inst.isDisabled;
},
_attachSelectbox: function (target, settings) {
if (this._getInst(target)) {
return FALSE;
}
var $target = $(target),
self = this,
inst = self._newInst($target),
sbHolder, sbSelector, sbToggle, sbOptions,
s = FALSE, optGroup = $target.find("optgroup"), opts = $target.find("option"), olen = opts.length;
$target.attr("sb", inst.uid);
$.extend(inst.settings, self._defaults, settings);
self._state[inst.uid] = FALSE;
$target.hide();
function closeOthers() {
var key, sel,
uid = this.attr("id").split("_")[1];
for (key in self._state) {
if (key !== uid) {
if (self._state.hasOwnProperty(key)) {
sel = $("select[sb='" + key + "']")[0];
if (sel) {
self._closeSelectbox(sel);
}
}
}
}
}
sbHolder = $("<div>", {
"id": "sbHolder_" + inst.uid,
"class": inst.settings.classHolder,
"tabindex": $target.attr("tabindex")
});
sbSelector = $("<a>", {
"id": "sbSelector_" + inst.uid,
"href": "#",
"class":...