关闭和开放的jquery事件选择下拉菜单，而不是更改 [英] Jquery events for closing and opening select drop down , and not on change
问题描述
我想要一个简洁的解决方案来处理下拉菜单中的事件，这样当用户打开选择菜单时，它会提醒打开，当他关闭它时，它会提醒关闭，忽略所选值是否更改。
< 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
http://www.bartos.me/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（）;
这里是一个小提琴 http://jsfiddle.net/P6ZCn/ （再次，没有风格）
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
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事件选择下拉菜单，而不是更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
