本文介绍了关闭和开放的jquery事件选择下拉菜单,而不是更改的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想要一个简洁的解决方案来处理下拉菜单中的事件,这样当用户打开选择菜单时,它会提醒打开,当他关闭它时,它会提醒关闭,忽略所选值是否更改。

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

我想要的是类似于



<$ p $(#dummy)。on('open',function(){// do something})
$(#dummy)。on('close' ,function(){// do something})

类似heapbox



并且此解决方案不可接受:

解决方案

扩展本地功能的典型方法选择框是用样式化标记替换它,然后将新标记的值绑定回原有(现在隐藏)的select元素。 (注意:我没有包括任何样式,这是使用select替换的一个简单例子)。

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

generateStyledSelectbox:function(cssClass){

//包含在.each中以隔离< select>的所有实例。
$('select')。each(function(index){
var $ source = $(this),
selected = $ source.find(option [selected])
options = $ source.find('option'),
selindex = index;

//将可选样式的伪选择元素添加到doc
$ source.after ('< div id =result-'+ index +'class ='+ cssClass +'>< / div>');

//伪造伪选择列表选择元素
$('#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>');

//将选择值赋给伪选项lis
options.each(function(){
$('#activeValue - '+ index +'dd ul')。append('< li class =select-menu-item>< a href = +(+)(+)< / span>< / a> ; /立GT;');
}); $('。dropdown')。each(function(index){
$(this).find('dd ul li')。on('click',function(事件){
event.preventDefault();
var text = $(this).not('。value')。html(),
$ base = $('。custom- eq(index).find('dt a')。html(text);
$('.box'); eq(index);

$('。dropdown' .drop(')。eq(index).find('dd ul')。hide();

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

//防止下拉链接操作
$('。dropdown dt a')。on('click',function(event){
event.preventDefault();
});

//打开/关闭
$(。dropdown)。eq(index).find('dt a')。on('click',function(){
$(。dropdown)。eq(index).find('dd ul')。toggle();
}); $('。dropdown')。eq(index).find('dd ul li')。on('click',function(){
var text = $( this).html(),
newval = $(this).find('。value')。html();
$ b $(。dropdown)。eq(index) (index).val(newval);
$(。dropdown)。eq( index).find('dd ul')。hide();
});
$ b $ //在外部点击
$(document).on('click',function(e){
var $ clicked = $(e.target); ()。
if(!$ clicked.parents()。hasClass(dropdown)){
$(。dropdown)。eq(index).find('dd ul')。hide() ;
}
//删除下拉菜单打开可定位的类
if(!$ clicked.parents()。hasClass(dropdown-open)){
$ clicked.parents ().removeClass('dropdown-open');
}
});

//隐藏本地选择
$ source.css('display','none');

//分配初始值(默认值)
var initialval = $ source.find('option')。eq(0).html();
$('#activeValue - '+ index +'dt a')。html(initialval);

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

这里是一个小提琴(再次,没有风格)


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 heapboxhttp://www.bartos.me/heapbox/

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

解决方案

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.net/P6ZCn/ (again, without styles)

这篇关于关闭和开放的jquery事件选择下拉菜单,而不是更改的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-13 14:17