Im using jquery dropdown selectbox from http://www.misfitgeek.com/2011/04/jquery-styled-dropdownlist/
its working fine except i want to change background to 0bg_select.png when clicked and when dropdown is up then the image to previous one.
Can any one help
<!-- aspx -->
<link href= Styles/Selectbox.css rel= stylesheet type= text/css />
<script src= http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.js
type= text/javascript charset= utf-8 ></script>
<script type= text/javascript src= Scripts/jquery.selectbox-0.5.js >
</script>
<script src= Scripts/PageScript.js type= text/javascript ></script>
<asp:DropDownList runat= server name= Items id= Items
class= StyledDD ClientIDMode= Static >
<asp:ListItem>One</asp:ListItem>
<asp:ListItem>Two</asp:ListItem>
<asp:ListItem>Three</asp:ListItem>
<asp:ListItem>Four</asp:ListItem>
</asp:DropDownList>
<!-- jquery function -->
$(document).ready(function () {
$( .StyledDD ).selectbox();
});
<!-- CSS --->
/* Drop down styles*/
div.selectbox-wrapper {
position:absolute;
width:400px;
background-color:white;
border:1px solid #ccc;
margin:0px;
margin-top:-10px;
padding:0px;
text-align:left;
max-height:200px;
overflow:auto;
}
/*Drop down list styles*/
div.selectbox-wrapper ul {
list-style-type:none;
margin:0px;
padding:0px;
}
/* Selected item in dropdown list*/
div.selectbox-wrapper ul li.selected {
background-color: #EAF2FB;
}
/*
* jQuery selectbox plugin
*
* Copyright (c) 2007 Sadri Sahraoui (brainfault.com)
* Licensed under the GPL license and MIT:
* http://www.opensource.org/licenses/GPL-license.php
* http://www.opensource.org/licenses/mit-license.php
*
* The code is inspired from Autocomplete plugin (http://www.dyve.net/jquery/?autocomplete)
*
* Revision: $Id$
* Version: 0.5
*
* Changelog :
* Version 0.5
* - separate css style for current selected element and hover element which solve the highlight issue
* Version 0.4
* - Fix width when the select is in a hidden div @Pawel Maziarz
* - Add a unique id for generated li to avoid conflict with other selects and empty values @Pawel Maziarz
*/
jQuery.fn.extend({
selectbox: function(options) {
return this.each(function() {
new jQuery.SelectBox(this, options);
});
}
});
/* pawel maziarz: work around for ie logging */
if (!window.console) {
var console = {
log: function(msg) {
}
};
}
/* */
jQuery.SelectBox = function (selectobj, options) {
var opt = options || {};
opt.inputClass = opt.inputClass || "selectbox";
opt.containerClass = opt.containerClass || "selectbox-wrapper";
opt.hoverClass = opt.hoverClass || "current";
opt.currentClass = opt.selectedClass || "selected";
opt.debug = opt.debug || false;
var elm_id = selectobj.id;
var active = -1;
var inFocus = false;
var hasfocus = 0;
//jquery object for select element
var $select = $(selectobj);
// jquery container object
var $container = setupContainer(opt);
//jquery input object
var $input = setupInput(opt);
// hide select and append newly created elements
$select.hide().before($input).before($container);
init();
$input
.click(function () {
if (!inFocus) {
$container.toggle();
}
})
.focus(function () {
if ($container.not( :visible )) {
inFocus = true;
$container.show();
}
})
.keydown(function (event) {
switch (event.keyCode) {
case 38: // up
event.preventDefault();
moveSelect(-1);
break;
case 40: // down
event.preventDefault();
moveSelect(1);
break;
//case 9: // tab
case 13: // return
event.preventDefault(); // seems not working in mac !
$( li. + opt.hoverClass).trigger( click );
break;
case 27: //escape
hideMe();
break;
}
})
.blur(function () {
if ($container.is( :visible ) && hasfocus > 0) {
if (opt.debug) console.log( container visible and has focus );
} else {
hideMe();
}
});
function hideMe() {
hasfocus = 0;
$container.hide();
}
function init() {
$container.append(getSelectOptions($input.attr( id ))).hide();
var width = $input.css( width );
$container.width(width);
$container.attr( padding-left , 30px );
}
function setupContainer(options) {
var container = document.createElement("div");
$container = $(container);
$container.attr( id , elm_id + _container );
$container.addClass(options.containerClass);
return $container;
}
function setupInput(options) {
var input = document.createElement("input");
var $input = $(input);
$input.attr("id", elm_id + "_input");
$input.attr("type", "text");
$input.addClass(options.inputClass);
$input.attr("autocomplete", "off");
$input.attr("readonly", "readonly");
$input.attr("tabIndex", $select.attr("tabindex")); // "I" capital is important for ie
return $input;
}
function moveSelect(step) {
var lis = $("li", $container);
if (!lis) return;
active += step;
if (active < 0) {
active = 0;
} else if (active >= lis.size()) {
active = lis.size() - 1;
}
lis.removeClass(opt.hoverClass);
$(lis[active]).addClass(opt.hoverClass);
}
function setCurrent() {
var li = $("li." + opt.currentClass, $container).get(0);
var ar = ( + li.id).split( _ );
var el = ar[ar.length - 1];
$select.val(el);
$input.val($(li).html());
return true;
}
// select value
function getCurrentSelected() {
return $select.val();
}
// input value
function getCurrentValue() {
return $input.val();
}
function getSelectOptions(parentid) {
var select_options = new Array();
var ul = document.createElement( ul );
$select.children( option ).each(function () {
var li = document.createElement( li );
li.setAttribute( id , parentid + _ + $(this).val());
li.innerHTML = $(this).html();
if ($(this).is( :selected )) {
$input.val($(this).html());
$(li).addClass(opt.currentClass);
}
ul.appendChild(li);
$(li)
.mouseover(function (event) {
hasfocus = 1;
if (opt.debug) console.log( over on : + this.id);
jQuery(event.target, $container).addClass(opt.hoverClass);
})
.mouseout(function (event) {
hasfocus = -1;
if (opt.debug) console.log( out on : + this.id);
jQuery(event.target, $container).removeClass(opt.hoverClass);
})
.click(function (event) {
var fl = $( li. + opt.hoverClass, $container).get(0);
if (opt.debug) console.log( click on : + this.id);
$( li. + opt.currentClass).removeClass(opt.currentClass);
$(this).addClass(opt.currentClass);
setCurrent();
hideMe();
});
});
return ul;
}
};
/* Hover state for dropdown list */
div.selectbox-wrapper ul li.current {
background-color: #CDD8E4;
}
/* Drop down list items style*/
div.selectbox-wrapper ul li {
list-style-type:none;
display:block;
margin:0;
padding:2px;
cursor:pointer;
}
/* Look and feel of select box */
.selectbox
{
margin: 0px 5px 10px 0px;
padding-left:2px;
font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size:1em;/* Resize Font*/
width : 190px; /* Resize Width */
display : block;
text-align:left;
background: url( ../images/bg_select.png ) right;
cursor: pointer;
border:1px solid #D1E4F6;
color:#333;
}