query实现可以左右的下拉菜单效果

最新推荐文章于 2023-03-16 15:27:10 发布
最新推荐文章于 2023-03-16 15:27:10 发布
阅读量1k 收藏 2
点赞数 1
文章标签： query function jquery border
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/honey_th/article/details/7404428
版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>可以左右选择的下拉菜单效果</title>

<script language="javascript" type="text/javascript" src="../include/jquery.js"></script>

<script language="javascript" type="text/javascript">

//使用jquery加载事件

$(document).ready(function (){

/*****************************************/

//处理向右侧添加一个选项的事件

$("#right-one").click(function (){

//向右侧添加一个

// 父（要插入的地方）     //子，插入的内容

$('#second').append($('#first option:selected'));

});

/********************处理向右插入全部*********************/     $("#right-all").click(function (){

//向右侧添加全部

// 父（要插入的地方）     //子，插入的内容

$('#second').append($('#first option'));

});

/*******************向左侧添加单个**********************/

//处理向左侧添加一个选项的事件

$("#left-one").click(function (){

//向左侧添加一个

// 父（要插入的地方）     //子，插入的内容

$('#first').append($('#second option:selected'));

});

/********************处理向右插入全部*********************/     $("#left-all").click(function (){

//向左侧添加全部

// 父（要插入的地方）     //子，插入的内容

$('#first').append($('#second option'));

});

//处理双击一个到右侧

 $("#first").dblclick(function (){

$('#second').append($('#first option:selected'));

});

//处理双击一个到左侧

 $("#second").dblclick(function (){

$('#first').append($('#second option:selected'));

});

});

</script>

</head>

<body>

<table width="300" border="1">

  <tr>

    <td>

      <select id="first" size="10" style="width:120px;" multiple="multiple">

        <option>选项1</option>

        <option>选项2</option>

        <option>选项3</option>

        <option>选项4</option>

        <option>选项5</option>

        <option>选项6</option>

        <option>选项7</option>

        <option>选项8</option>

      

      </select>

    </td>

    <td>

    <input type="button" id="right-one" value="->" /><br>

    <input type="button" id="right-all" value=">>" /><br>

    <input type="button" id="left-one" value="<-" /><br>

    <input type="button" id="left-all" value="<<" /><br>

    </td>

    <td>

    <select id="second" size="10" style="width:120px;" multiple="multiple">

        <option>右选项1</option>

        <option>右选项2</option>

      </select>

    </td>

  </tr>

</table>

</body>

</html>

honey_tao
关注
querySelector实现下拉菜单的效果
sinat_41920065的博客
04-27 706
实现下拉菜单缓慢显示，鼠标移出缓慢消失 html代码部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">...
Jquery的3种遍历方式
zzvar的博客
05-29 4945
学习目标： 参考博文： https://blog.csdn.net/honey_th/article/details/7404273 一、Jquery中each的几种遍历方法 1. 选择器+遍历 <script> $('div').each(function (i){ i就是索引值 this 表示获取遍历每一个dom对象 }); </script> 2. 选择器+遍历 <script> $('div').each(function (index,d
用jquery实现的一个超级简单的下拉菜单
lijunlinlijunlin的专栏
04-23 795
nav a { text-decoration: none; } nav > ul > li { float: left; text-align: center; padding: 0 0.5em; } nav li ul.sub-menu { display: none; padding-left: 0 !important; } .sub
jQuery商品左右滑动切换代码
ICode联盟
09-18 149
jQuery商品左右滑动切换代码，开抢倒计时特效代码。
jQuery 遍历方法总结
最新发布
忧郁的蛋的专栏
03-16 8145
5、each()，用于为每个匹配元素执行函数；在部分浏览器中不管用可以用prop，如果只是判断可以用$(this).find("ul>li>:checkbox:eq(" + i + ")").is(":checked");nextUntil()方法，主要用于获得指定元素的下一个同级元素，这个同级元素必须为指定元素与nextUntil()方法所设置元素之间的元素。prevUntil()方法，主要用于获得指定元素的上一个同级元素，这个同级元素必须为指定元素与prevUntil()方法所设置元素之间的元素。
php代码实现二级联动下拉菜单效果
11-19
本篇文章将详细介绍如何使用PHP来实现二级联动下拉菜单的效果。 首先，我们要理解二级联动的基本概念。它是指当用户在一个下拉菜单中选择一个选项时，另一个相关的下拉菜单会根据用户的选择动态地更新其选项。这...
ajax的下拉菜单,ajax实现的动态下拉菜单
weixin_32459883的博客
08-05 671
最近工程中要做一个下拉菜单,前段看的ajax正好没有实践的机会,于是就着手用ajax实现一下动态下拉菜单。以前也听人说过，做动态刷新下拉菜单很麻烦，要用js+iframe，但是看过ajax的一个例子，觉得相比之下确实更为简单，而且经实际例子看来，响应速度也确实更快。本想照着ajax基础教程上的例子自己写一个，可是却发现，人家用的不是下拉菜单，而是list菜单，即列表菜单，随着条件的变化，只传过来一...
jQuery实现二级下拉菜单
LiRenxian0316的博客
07-08 1923
jQuery实现二级下拉菜单&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;二级下拉菜单&lt;/title&gt; &lt;style&gt; /* 公共样式 */ body,ul,li {
JS--jQuery实现的多级下拉菜单效果代码
Juunnry的博客
10-25 2570
这篇文章主要介绍了jQuery实现的多级下拉菜单效果代码,涉及jquery鼠标事件及页面元素的显示与隐藏效果实现技巧,非常具有实用价值,需要的朋友可以参考下: 本文实例讲述了jQuery实现的多级下拉菜单效果代码。供大家参考。具体如下： 这是一款jQuery多级下拉菜单，在支持html5的浏览器中测试你会发现本菜单很智能，会自动判断浏览器边界来改变下拉菜单的显示方向，在ie下没发现此效果。整体...
纯CSS+HTML大型下拉菜单特效
12-17
对于大型下拉菜单，可能还需要考虑多级子菜单的处理，以及在不同屏幕尺寸下的适配，这时可以运用媒体查询（media query）实现响应式设计。 例如，对于移动设备，可能需要折叠菜单并显示汉堡图标来触发下拉： ```...
jQuery的三种遍历循环
热门推荐
思维小刀
06-03 3万+
0.总述 for循环 $.each for in 1.简述 $.each(object,function(index,e){ ... }); object --> 需要遍历的对象或数组 index --> 索引 e --> 循环的每个元素 2.代码 <!DOCTYPE html> <html> <b...
jquery实现导航下拉菜单
joan_yb的博客
07-29 1984
jquery实现导航下拉菜单
jQuery实现下拉菜单
sleepwalker_1992的专栏
05-17 7579
html文件&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;下拉菜单&lt;/title&gt; &lt;link rel="stylesheet" type="
新浪微博开发七（下拉菜单的实现）
kobe的专栏
03-17 1222
// //  PopMenu.h //  新浪微博 // //  Created by jose on 15-3-15. //  Copyright (c) 2015年 jose. All rights reserved. // #import //声明这是一个类，因为没先定义所以要先声明，下面的协议才可以使用 @class PopMenu; //下拉菜单方向 ty
jquery实现左右点击滑动
夏呆毛的博客
09-09 3977
jquery实现左右点击滑动 前端养成记：最近做的老项目，涉及到的一个简单的小功能，但是我这样的前端菜鸟还是费了一些功夫的，所以这里记录一下，以免日后忘记。 一、首先看下效果吧 这个是效果图，这个地方只能显示2个产品，然后可以点击左右滑动，来控制渲染。 二、HTML代码 这是一个div容器，代码是放在它里边的。 <div class="border-gb-title" id="tjcp">推荐产品</div> <div class="grey-card ptb4
jquery 遍历下拉框
weixin_33924312的博客
09-26 571
jQuery： $("select:[id='test'] option").each(function () { alert( $(this).text()); }) js： var opt = document.ge...
jquery实现二级导航下拉菜单效果实例
05-20 7810
大家都知道jQuery是一个框架，它对JS进行了封装，使其更方便使用。前面两篇博文分别是用CSS样式和JS实现的，那么这篇就用jQuery来实现二级下拉式菜单。 使用JQuery实现需要用到的知识有： 1)使用$(function(){...})获取到想要作用的HTML元素。 2)通过使用children()方法寻找子元素。 3)通过使用show()方法来显示HTML元素。 4)通过使用...
02jquery01-用3种方式实现下拉菜单
一笑的博客
11-03 1033
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } .wrap{ width:
Android编程：Spinner下拉菜单详解及实战示例
在Android编程中，下拉菜单Spinner是一种常见的选择器控件，用于提供有限选项让用户进行选择。本文将深入解析Spinner的用法，并通过两个示例来帮助理解其实现步骤和相关技巧。 首先，了解Spinner的基本概念。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值