ड्रॉपडाउन चयनित पृष्ठभूमि छवि परिवर्तन

मैं http://www.misfitgeek.com/2011/ से jQuery ड्रॉपडाउन चयन बॉक्स का उपयोग कर रहा हूं 04/jQuery स्टाइल-dropdownlist/
इसके कामकाज ठीक है, सिवाय इसके कि मैं पृष्ठभूमि को 0bg_select.png पर बदलना चाहता हूं, जब क्लिक किया जाता है और जब ड्रॉपडाउन ऊपर होता है तो छवि पिछले एक के लिए होती है। क्या कोई मदद कर सकता है

      <!-- 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>
        
              One
              Two
              Three
              Four
            

        <!--    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;
    }
0
जोड़ा संपादित
विचारों: 1

1 उत्तर

जब ड्रॉपडाउन का चयन/क्लिक किया जाता है और जब विकल्प बदल जाता है तो छवि को बदलने का एकमात्र तरीका होता है। ड्रॉपडाउन मेनू खुला या बंद होने पर पता लगाने का कोई तरीका नहीं है।

0
जोड़ा