Databases
StackOverflow2013
Postsdbo
POdropdown selected background image change
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POdropdown selected background image change
    text
    copied!<p>Im using jquery dropdown selectbox from <a href="http://www.misfitgeek.com/2011/04/jquery-styled-dropdownlist/" rel="nofollow">http://www.misfitgeek.com/2011/04/jquery-styled-dropdownlist/</a> <br> 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 </p> <pre><code> &lt;!-- aspx --&gt; &lt;link href='Styles/Selectbox.css' rel='stylesheet' type='text/css' /&gt; &lt;script src='http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.js' type='text/javascript' charset='utf-8'&gt;&lt;/script&gt; &lt;script type='text/javascript' src='Scripts/jquery.selectbox-0.5.js'&gt; &lt;/script&gt; &lt;script src='Scripts/PageScript.js' type='text/javascript'&gt;&lt;/script&gt; &lt;asp:DropDownList runat='server' name='Items' id='Items' class='StyledDD' ClientIDMode='Static'&gt; &lt;asp:ListItem&gt;One&lt;/asp:ListItem&gt; &lt;asp:ListItem&gt;Two&lt;/asp:ListItem&gt; &lt;asp:ListItem&gt;Three&lt;/asp:ListItem&gt; &lt;asp:ListItem&gt;Four&lt;/asp:ListItem&gt; &lt;/asp:DropDownList&gt; &lt;!-- jquery function --&gt; $(document).ready(function () { $('.StyledDD').selectbox(); }); &lt;!-- CSS ---&gt; /* 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') &amp;&amp; hasfocus &gt; 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 &lt; 0) { active = 0; } else if (active &gt;= 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; } </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload