jQuery监听事件经典例子

最新推荐文章于 2025-03-11 14:06:05 发布

zhaozijie51888

最新推荐文章于 2025-03-11 14:06:05 发布

阅读量170

点赞数

CC 4.0 BY-SA版权

分类专栏： JS 文章标签： javascript ViewUI

本文链接：https://blog.youkuaiyun.com/zhaozijie51888/article/details/84048525

JS 专栏收录该内容

33 篇文章

订阅专栏

本文提供了一个使用jQuery进行事件监听的经典示例，展示了如何通过双击、点击等操作来选择、移动下拉菜单中的选项，并实现了选项的上下调整等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关键字：jQuery监听事件经典例子

[color=red]js代码：[/color]
============================================================

$(function(){
$("#s1 option:first,#s2 option:first").attr("selected",true);

$("#s1").dblclick(function(){
var alloptions = $("#s1 option");
var so = $("#s1 option:selected");

so.get(so.length-1).index == alloptions.length-1?so.prev().attr("selected",true):so.next().attr("selected",true);

$("#s2").append(so);
});

$("#s2").dblclick(function(){
var alloptions = $("#s2 option");
var so = $("#s2 option:selected");

so.get(so.length-1).index == alloptions.length-1?so.prev().attr("selected",true):so.next().attr("selected",true);

$("#s1").append(so);
});

$("#add").click(function(){
var alloptions = $("#s1 option");
var so = $("#s1 option:selected");

so.get(so.length-1).index == alloptions.length-1?so.prev().attr("selected",true):so.next().attr("selected",true);

$("#s2").append(so);
});

$("#remove").click(function(){
var alloptions = $("#s2 option");
var so = $("#s2 option:selected");

so.get(so.length-1).index == alloptions.length-1?so.prev().attr("selected",true):so.next().attr("selected",true);

$("#s1").append(so);
});

$("#addall").click(function(){
$("#s2").append($("#s1 option").attr("selected",true));
});

$("#removeall").click(function(){
$("#s1").append($("#s2 option").attr("selected",true));
});

$("#s1up").click(function(){
var so = $("#s1 option:selected");
if(so.get(0).index!=0){
so.each(function(){
$(this).prev().before($(this));
});
}
});

$("#s1down").click(function(){
var alloptions = $("#s1 option");
var so = $("#s1 option:selected");

if(so.get(so.length-1).index!=alloptions.length-1){
for(i=so.length-1;i>=0;i--)
{
var item = $(so.get(i));
item.insertAfter(item.next());
}
}
});

$("#s2up").click(function(){
var so = $("#s2 option:selected");
if(so.get(0).index!=0){
so.each(function(){
$(this).prev().before($(this));
});
}
});

$("#s2down").click(function(){
var alloptions = $("#s2 option");
var so = $("#s2 option:selected");

if(so.get(so.length-1).index!=alloptions.length-1){
for(i=so.length-1;i>=0;i--)
{
var item = $(so.get(i));
item.insertAfter(item.next());
}
}
});
});

===========================================================