jquery如何触发下拉框点击事件,下拉框怎么写点击事件
内容导航:
一、jQuery触发下拉框单击事件。
按钮触发下拉框单击事件trigger触发select下拉框请求写在文档就绪函数里面,$(‘#typeId’).trigger(‘change’);用于页面载入的时候自动触发select的onchange事件
。如果要使得select的option为某一个value的选项被触发的话,可用用这一句$(‘#typeId’).val(saveValue).trigger(‘change’);其中saveValue为value值。$(function
() {// 初始化频道$.ajax({url: “/channel/”,type: “get”,async: false,dataType:
‘json’,success: function (e) {if ( == 0) { for (var i = 0; i < ; i++)
{$(‘#typeId’).append(” + [i].name + ”);/
$(“”).val([i].id).text([i].name).appendTo($(‘#typeId’));/}$(‘#typeId’).trigger(‘change’);}},error:
function () {}});});
二、用jquery怎么实现下拉菜单
把下拉菜单的内容及位置写好,然后使用JQ的toggleSlide()实现下拉菜单下拉及收缩效果html 代码如下:
- 菜单一
三、基于jquery扩展漂亮的下拉框可以二次修改
继续发一篇关于web前端自定义控件——ComboBox(下拉框),以往我在使用下拉框控件老是为了样式丑陋而烦恼,现在分享这个控件,希望有用的同仁们可以收藏,或进行二次修改,达到你想要的效果。
分解自定义下拉框:
1.创建构造函数,初始化赋值控件值。
2.绑定控件呈现在前台。
3.点击下拉框控件,展示下拉列表
4.点击触发下拉框控件,收起下拉列表。
5.点击下拉项触发事件。
代码如下:
Html代码:
复制代码 代码如下:
css样式:
复制代码 代码如下:
.dropdown span a{float:left;background:url(/img/Icon_);}
/ 下拉框 http://power. ** .com_ /
.dropdown span a{background-position: -213px -75px;}
.dropdown{float:left;width:105px;}
.dropdown span{border:solid 1px
ccc;width:95%;height:28px;background:url(/img/tbline_);border-
radius:8px;overflow:hidden;}
.dropdown span{float:left;padding-left:10px;line-height:28px; cursor:pointer;}
.dropdown {border-radius:8px 8px 0px 0px;}
.dropdown span font{width:auto;margin-right: 0px;float:left;}
.dropdown span a{float:right;width:20px;height:20px;margin:4px 0;}
.dropdown p{border:solid 1px #ccc;border-
top:0px;width:103px;display:none;position:absolute;margin-top:28px;background-
color:#fff;z-index:3;max-height:280px;overflow-y: auto; overflow-x: hidden;}
.dropdown p a{float:left;line-height:28px;height:28px;padding-
left:10px;color:#666;font-size:14px;cursor:default;text-
align:left;width:100%;overflow:hidden;}
.dropdown p a:hover{background:url(/img/tbline_);color:#666;}
Js代码:
1、自定义类:
复制代码 代码如下:
//下拉框
var ComboBox = function () {
; .data_default;
**.data_list;
= 0;
var this = this;
var _index, _tag, _value;
//初始化
= function () {
_tag = ;
index = ;
//设置对象
wn(__.data_default, _.data_list);
//赋值绑定事件
if ((‘span font’).length > 0) _value = (‘span font’).attr(‘id’);
if (_tag == undefined) { return false; }
();
ndex(_index);
return true;
}
//设置下拉列表
wn = function (default_data, list) {
var css = (‘class’);
if (default_data == undefined) {
default_data = { id: ‘null’, name: ” };
}
var html = ”;
if ((‘p’).length > 0 && (‘span’).length > 0) {
$.each(list, function (i, value) {
_html += ” + .name + ”;
});
(‘span font’).replaceWith(‘ ‘ + default_ .name + ‘ ‘);
_(‘p’).html(_html);
} else {
_html = ‘
‘;
html += ” + default ** _.name + ‘ ‘;
_html += ‘
‘;
if (list) {
$.each(list, function (i, value) {
html += ” + **.name + ”;
});
}
_html += ‘
‘;
_html += ‘
‘;
var parent = ();
_th(_html);
_tag = (‘.dropdown’ + ( > 0 ? ‘.’ + (‘ ‘, ‘.’) : ”));
}
}
//下拉事件
= function () {
(‘span’).unbind(‘click’).click(function () {
var p = $(this).parent().find(‘p’);
if ((‘display’) == ‘block’) {
(‘display’, ‘none’);
$(this).removeClass(‘active’);
} else if (().length > 0) {
(‘display’, ‘block’);
$(this).addClass(‘active’);
}
});
}
//选中事件
ndex = function (index) {
(‘p a’).unbind(‘click’).click(function () {
var parent = $(this).parent().parent();
//给下拉框赋值
if ($(this).text().length > 0) {
var font = (‘font’);
($(this).text());
(“_id”, $(this).attr(‘_id’));
_ndexExpand(parent, $(this).index());
(‘span’).removeClass(‘active’);
}
(‘p’).css(‘display’, ‘none’);
});
if ((‘p a’).length <= index) _index = 0;
if (_value && _value != ”) {
_index = (‘p a[id=”‘ + _value + ‘”]’).index();
}
(‘p a:eq(‘ + _index + ‘)’).click();
}
//选中事件扩展
ndexExpand = function (tag, index) { }
}
2、示例代码:
复制代码 代码如下:
//http://www..com
var array_state = [{ id: -1, name: ‘状态’ }, { id: 1, name: ‘未成功’ }, { id: 2,
name: ‘成功’ }, { id: 3, name: ‘失败’}];
//状态下拉控件
var select_type = new ComboBox();
select_ = $(‘.select_type’);
select_ .data_default = array_state[0];
select__**.data_list = array_state;
select_ndexExpand = function (tag, index) {
//fun_Pager();
}
select_();
3、示例图:
四、JQuery的里面鼠标的左键点击和click事件效果完全一样吗
答:一样的,所谓的左键单击指的就是控件的click()事件!希望能帮助你。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,请发送邮件至 55@qq.com 举报,一经查实,本站将立刻删除。转转请注明出处:https://www.szhjjp.com/n/110652.html