javascript - Jquery events for closing and opening select drop down , and not on change - Stack Overflow

admin管理员组

文章数量:1331091

i want a neat solution to handle event for a drop down menu , so that when user opens the select menu , it alerts opened , and when he closes it , it alerts closed , neglecting wheather the selected value is changed or not.

<select id="dummy">
<option>dummy1</option>
<option>dummy2</option>
<option>dummy3</option>
</select>

what i want is something like

$("#dummy").on('open',function(){//do something})
$("#dummy").on('close',function(){//do something})

something like heapbox /

and this solution is not acceptable : Run change event for select even when same option is reselected

i want a neat solution to handle event for a drop down menu , so that when user opens the select menu , it alerts opened , and when he closes it , it alerts closed , neglecting wheather the selected value is changed or not.

<select id="dummy">
<option>dummy1</option>
<option>dummy2</option>
<option>dummy3</option>
</select>

what i want is something like

$("#dummy").on('open',function(){//do something})
$("#dummy").on('close',function(){//do something})

something like heapbox http://www.bartos.me/heapbox/

and this solution is not acceptable : Run change event for select even when same option is reselected

• javascript
• jquery
• html
• html-select

Share Improve this question Follow edited May 23, 2017 at 12:24 CommunityBot 111 silver badge asked Dec 2, 2013 at 5:38 ProllyGeekProllyGeek 15.9k99 gold badges5656 silver badges7777 bronze badges 12

• Your example link is dead, and you've misspelt 'function'. How about telling us what you've actually tried? – monners Commented Dec 2, 2013 at 5:44
• 2 click and blur should work fine. – DevlshOne Commented Dec 2, 2013 at 5:45
• what dead link are you talking about ? , and what function did i misspelt ? – ProllyGeek Commented Dec 2, 2013 at 5:45
• 1 use a select plugin....events regarding select tag are difficult, particularly in IE. You are going down a road others have been down for years....and that's why plugins showed up that are more event friendly. Not to mention they can be styled as well – charlietfl Commented Dec 2, 2013 at 5:49
• 1 @ProllyGeek keep trying....then try various browsers. Up to you...been there done that – charlietfl Commented Dec 2, 2013 at 5:52

 |  Show 7 more ments

1 Answer 1

Sorted by: Reset to default 2

the typical approach to extending the native functionality of a select box is to replace it with styleable markup and then tie the values of the new markup back into the origninal (now hidden) select element. (NOTE: I've not included any styles. This is a bare-bones example of using a select replacement).

var SelectBox = {
init: function () {
    if ($('select').length > 0) {
        this.generateStyledSelectbox('custom-select');
    };
},

generateStyledSelectbox: function (cssClass) {

    // Contained within .each to isolate all instances of <select>
    $('select').each(function(index) {
        var $source = $(this),
            selected = $source.find("option[selected]"),
            options = $source.find('option'),
            selindex = index;

        // Append styleable pseudo-select element to doc
        $source.after('<div id="result-' + index + '" class="' + cssClass + '"></div>');

        // Construct select list in pseudo select element
        $('#result-' + index).append('<dl id="activeValue-' + index + '" class="dropdown"></dl>');
        $('#activeValue-' + index).append('<dt><a href="#">' + selected.text() + '<span class="value">' + selected.val() + '</span></a></dt>');
        $('#activeValue-' + index).append('<dd><ul></ul></dd>');

        // Assign select values to pseudo-select lis items
        options.each(function () {
            $('#activeValue-'+ index + ' dd ul').append('<li class="select-menu-item"><a href="#">' + $(this).text() + '<span class="value">' + $(this).val() + '</span></a></li>');
        });

        $('.dropdown').each(function(index) {
            $(this).find('dd ul li a').on('click', function(event) {
                event.preventDefault();
                var text = $(this).not('.value').html(),
                    $base = $('.custom-selectbox').eq(index);

                $('.dropdown').eq(index).find('dt a').html(text);
                $('.dropdown').eq(index).find('dd ul').hide();

                $base.val($(this).find('span.value').html());
            });
        });

        // prevent link actions in dropdown
        $('.dropdown dt a').on('click', function (event) {
            event.preventDefault();
        });

        // open/close
        $(".dropdown").eq(index).find('dt a').on('click', function () {
            $(".dropdown").eq(index).find('dd ul').toggle();
        });

        $(".dropdown").eq(index).find('dd ul li a').on('click', function () {
            var text = $(this).html(),
                newval = $(this).find('.value').html();

            $(".dropdown").eq(index).find('dt a span').html(text);
            $('select').eq(index).val(newval);
            $(".dropdown").eq(index).find('dd ul').hide();
        });

        // Hide dropdown on outside click
        $(document).on('click', function (e) {
            var $clicked = $(e.target);
            if (!$clicked.parents().hasClass("dropdown")) {
                $(".dropdown").eq(index).find('dd ul').hide();
            }
            // remove dropdown-open targetable class
            if (!$clicked.parents().hasClass("dropdown-open")) {
                $clicked.parents().removeClass('dropdown-open');
            }
        });

        // Hide native select
        $source.css('display', 'none');

        // assign initial (default) value
        var initialval = $source.find('option').eq(0).html();
        $('#activeValue-'+index+' dt a').html(initialval);

    }); // END .each
}
};
SelectBox.init();

Here's a fiddle http://jsfiddle/P6ZCn/ (again, without styles)

本文标签：