jQuery实现下拉框应用选择

已于 2023-07-28 19:37:27 修改
阅读量526 收藏
点赞数
文章标签： jquery
于 2020-05-06 21:17:40 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Timber_wood/article/details/105959378
版权 
<!DOCTYPE html>
<html>
<head>
<title>下拉框</title>

<link href="/static/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="/static/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/static/jQuery/jquery-5.1.1.min.js"></script>

<style type="text/css">
    .selectc{
       float: left;
    }
    .button1{
        float: left;
        width: 120px;
        height: 200px;
    }
    button{
    	width: 120px;
    }
</style>
</head>
<body>
 	<div>
		<label>姓名</label>
		<input type="text" name="">
		<label>爱好</label>
		<input type="text" name="">
	</div>
 <div class="selectc">
  	<select multiple="true" id="selected1" style="width: 150px;height: 200px;">
	   	<option value="1">1</option>
	   	<option value="2">2</option>
	   	<option value="3">3</option>
	   	<option value="4">4</option>
	   	<option value="5">5</option>
	   	<option value="6">6</option>
	  	<option value="7">7</option>
	   	<option value="8">8</option>
	   	<option value="9">9</option>
  	</select>
 </div>
	<div class="button1">
		<button id="add"  class="btn btn-default">选中添加到右边</button>
		<button id="add_all" class="btn btn-default">全部添加右边</button>
		<button id="romve" class="btn btn-default">选中添加到左边</button>
		<button id="romve_all" class="btn btn-default">全部添加左边</button>
	</div>
 <div class="selected">
  <select multiple="true" id="selected2" style="width: 150px;height: 200px;"></select>
 </div>
 <div class="form-group">
 </div> 
</body>
</html>
<script type="text/javascript">
	  	$(function(){
		   	$("#add").on('click',function(){
		    	$('#selected1 option:selected').appendTo('#selected2');
	    	});

		    $("#add_all").on('click',function(){
		    	$('#selected1 option').appendTo('#selected2');
		    });

		    $("#romve").on('click',function(){
		    	$('#selected2 option:selected').appendTo('#selected1');
		    });

		    $("#romve_all").on('click',function(){
		    	$('#selected2 option').appendTo('#selected1');
		    });

		    $('#selected1 option').on('dblclick',function(){
		    	$(this).appendTo('#selected2');
		    });
	   });
	</script>
Timber_wood
关注
jquery实现下拉框
qq_39579290的博客
09-14 1560
jquery实现下拉框（单选，多选，既可以手动输入也可以选择）
JS或JQuery实现添加下拉选择框内容
xuguoxing123的博客
04-01 2468
       具体代码如下： <html> <body> <select id="select" title="请选择" class=""> <option value="" selected="selected">--全部--</option><!-- 默认选...
移动端交互设计：使用jQuery实现下拉菜单选择功能
最新发布
weixin_42600407的博客
10-02 1341
本文还有配套的精品资源，点击获取 简介：在移动设备上，由于触摸操作和屏幕空间限制，设计便捷的多级选择界面尤为重要。本代码通过利用jQuery库简化交互，配合触摸滑动事件处理，实现了从底部弹出的层级下拉菜单。详细解析了HTML结构、CSS样式和JavaScript逻辑的构建过程，以及响应式设计和性能优化的实现方法。同时强调了交互反馈的重要性，为移动应用或网站提供更丰富的用户体...
JQuery实现下拉框
qq_37348649的博客
04-02 1534
jquery 的 下拉框第一次Coding，感觉炸疯了，为了小伙伴不在和我一样，我决定把这简单又基础的代码Show出来， <div class="bjui-row col-1"> <label class="row-label" style="width: 150px">任务人:</label> <div class="row-input required"> .
关于JQuery中的下拉框
weixin_56927363的博客
08-07 711
在复习与学习的同时，随着知识的混学，很容易就把一些知识忘记，因此我将内容分享在CSDN平台中，供大家参考，并且为自己日后复习做储存。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jquery实现的下拉菜单</title> <style type="text/css">
jquery 下拉菜单
qq_61869009的博客
10-06 629
纯css写一个好看的下拉列表。
JQuery操作下拉框
萧曳丶
01-13 8168
要实现这种效果： HTML代码 1 2 3 4 5 6 7 苹果 8 香蕉 9 草莓 10 橘子
jQuery实现下拉框选择图片功能实例
10-23
总结起来，本实例展示了如何利用jQuery和`imageselect.js`插件实现一个功能丰富的下拉框，它不仅能显示文本选项，还能展示与选项关联的图片，提高了用户在选择过程中的可视性和互动性。这种技术在现代Web开发中有着...
jquery实现下拉框左右选择功能
10-20
本文将深入探讨如何使用jQuery实现下拉框（多选）的左右选择功能，这种功能常见于用户需要在两个列表之间转移选项的场景，例如在创建自定义设置或选择项目时。 首先，我们需要理解基本的HTML结构。在这个示例中，有...
jquery下拉框应用
abysstoabyss的专栏
06-21 257
html效果如下所示：* 首先实现将左边的选中的移动到右边 (“#add”).click(function(){                 var $option = $(‘#select1 option:selected’);                 var $remove = $option.remove();                 $("#select2").appen
jQuery实现下拉框左右选择的简单实例
10-26
标题中的“jQuery实现下拉框左右选择的简单实例”指的是使用jQuery库来创建一个交互式的下拉选择框，用户可以在两个并排的下拉框之间移动选项。这种设计常见于数据筛选或设置选择中，方便用户在多个选项间进行转移...
jQuery实现下拉选项框
Serena_tz的博客
03-26 552
html文件： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> *{padding: 0px; margin: 0px;} .content{ width: 100%; height: 500px; /* background: #F27729; */ }
jQuery实现下拉框
Timber_wood的博客
04-28 247
调用jQuery,用slideToggle();实现下拉框 jQuery插件下载地址 <script type="text/javascript" src="/static/js/jquery-3.5.0.min.js"></script> <script type="text/javascript"> $(function(){ ...
jQuery 下拉菜单操作总结
明月清风
09-05 6715
获取Select ：  获取select 选中的 text :    $("#ddlRegType").find("option:selected").text();    获取select选中的 value:    $("#ddlRegType "
构建自定义可输入下拉框的jQuery插件
weixin_31315007的博客
08-30 1400
本文还有配套的精品资源，点击获取 简介：本文介绍了一个名为“可输入下拉框jQuery插件”的工具，该插件能够提高用户体验，通过结合输入框与下拉框功能，实现动态筛选建议。介绍了插件如何利用jQuery进行DOM操作、事件处理以及为用户提供了鼠标和键盘操作的多模式交互。文档中详细解释了插件的安装和使用方法，包括如何引入必要的文件和如何初始化插件。此外，开发者还提供了参数配置选项...
Jquery下拉框
qq_39579290的博客
06-15 955
HTML下拉框事件
jquery操作select下拉框的多种方法(选中_取值_赋值等)
weixin_34344403的博客
07-04 594
Query获取Select选择的Text和Value:语法解释：1.$("#select_id").change(function(){//code...}); //为Select添加事件，当选择其中一项时触发2. varcheckText=$("#select_id").find("option:selected").text(); //获取Select选择的Text...
利用jquery实现下拉框的禁用与启用
10-20
但是，在动态的Web应用中，我们经常需要通过JavaScript或jQuery来动态地控制下拉框的状态，这时就需要使用jQuery提供的方法。 首先，我们需要了解jQuery选择器和方法的使用。jQuery选择器允许我们选择页面中的DOM...
jquery下拉选框
11-24
使用JavaScript和CSS3制作的兼容移动手机的侧边栏多级导航菜单UI设计效果。该多级菜单侧边栏布局的菜单列表切换时带有非常酷的动画延迟效果，并且在侧边栏顶部还带有面包屑导航。
jquery select插件带搜索框的下拉选择框代码
08-24
jquery.searchableSelect。select插件，jQuery下拉选择框代码。带搜索功能的选择框代码。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值