用于关闭和打开的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>
我想要的是类似的东西
$("#dummy").on('open',function(){//do something})
$("#dummy").on('close',function(){//do something})
像堆箱的东西http://www.bartos.me/heapbox/
并且这种解决方案是不可接受的:即使重新选择了相同的选项,也要为select运行更改事件
扩展选择框的本机功能的典型方法是用可样式化的标记替换它,然后将新标记的值重新绑定到原始(现已隐藏)选择元素中。(注意:我没有包含任何样式。这是一个使用select替换的简单示例)。
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();
这是一把小提琴http://jsfiddle.net/P6ZCn/(同样,没有样式)
相关文章:
- 基于其他下拉菜单选择隐藏/显示下拉菜单
- Asp.net 引导下拉菜单 - 选择一个项目
- 检测引导下拉菜单选择的正确方法是什么
- 当上一个下拉菜单选择了某些内容时,javascript显示下拉菜单
- 如何根据下拉菜单选择隐藏/显示文本框
- 使用.on的多个下拉菜单选择文本仅适用于第一个下拉菜单
- 如何基于两个下拉菜单选择进行页面重定向
- WordPress 类别下拉菜单选择链接断开
- Jquery - 根据下拉菜单选择加载 XML 文件
- 使用下拉菜单选择不同的语言并翻译 RoR 3.2 Ruby 2.0
- 将下拉菜单选择保存在 Cookie 中
- 如何生成下拉菜单选择以根据数据库中可用的行/记录表单数据填充表单
- 尝试在鼠标悬停时为Wordpress中的下拉菜单选择添加突出显示
- 使后台生成的下拉菜单选择成为强制性的
- 求和2个跨度元素中的两个值(用户可以通过下拉菜单选择每个跨度元素的值)
- AJAX下拉菜单选择
- AngularJS选择下拉菜单-选择默认选项
- 下拉菜单(选择)--根据所选内容选择项目和图片
- 单选按钮&下拉菜单(选择标记)-获取先前选定的菜单
- 切换隐藏/显示下拉菜单选择事件