jquery制作select列表双向选择示例代码

2024-02-22 18:29:22

jquery制作的select列表双向选择，兼容性肯定是不错的，需要的朋友可以学习下

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script> 

<style>
.sel{width:150px;height:200px;}
.btn{width:50px;font-weight:bold;font-size:14px; }
</style>
</HEAD> 

<BODY>
<table>
<tr>
<td>
<select multiple class="sel" id="sel_left">
<option value="a">aaaaaaaaaaa</option>
<option value="b">bbbbbbbbbbb</option>
<option value="c">ccccccccccc</option>
<option value="d">ddddddddddd</option>
<option value="e">eeeeeeeeeee</option>
</select>
</td>
<td>
<p><button class="btn" id="btn_1">>> </button></p>
<p><button class="btn" id="btn_2">></button></p>
<p><button class="btn" id="btn_3"><</button></p>
<p><button class="btn" id="btn_4"><<</button></p> 

</td>
<td>
<select multiple class="sel" id="sel_right">
<option value="f">fffffffffff</option>
</select>
</td>
</tr>
</table>
</BODY>
<script>
$(function(){
$("#sel_left,#sel_right").bind("change",checkBtn);
$("#btn_1,#btn_2,#btn_3,#btn_4").bind("click",clickBtn);
checkBtn();
}); 

function checkBtn(){
jQuery("#sel_left>option").length > 0 ? jQuery("#btn_1").removeAttr("disabled") : jQuery("#btn_1").attr("disabled","disabled");
jQuery("#sel_left option:selected").length > 0 ? jQuery("#btn_2").removeAttr("disabled") : jQuery("#btn_2").attr("disabled","disabled");
jQuery("#sel_right option:selected").length > 0 ? jQuery("#btn_3").removeAttr("disabled") : jQuery("#btn_3").attr("disabled","disabled");
jQuery("#sel_right>option").length > 0 ? jQuery("#btn_4").removeAttr("disabled") : jQuery("#btn_4").attr("disabled","disabled");
} 

function clickBtn(e){
if("btn_1" == e.target.id){
jQuery("#sel_left>option").appendTo("#sel_right");
}else if("btn_2" == e.target.id){
jQuery("#sel_left option:selected").appendTo("#sel_right");
}else if("btn_3" == e.target.id){
jQuery("#sel_right option:selected").appendTo("#sel_left");
}else if("btn_4" == e.target.id){
jQuery("#sel_right>option").appendTo("#sel_left");
}
checkBtn();
}
</script>
</HTML>

基于jquery实现select选择框内容左右移动添加删除代码分享

本文实例讲述了select选择框内容左右移动添加删除.分享给大家供大家参考.具体如下: select选择框内容左右移动添加删除代码基于jquery-1.8.3.min.js实现,简单实用,选中选项内容,点击移动按钮可进行内容左右移动,双击option内容也可左右移动,支持单选移动.多选移动和一键全部移动! 运行效果图: ----------------------查看效果----------------------- 小提示:浏览
Jquery对select的增、删、改、查操作

逃不开传统的四种操作:增.删.改.查. <四处搜刮了jquery对select操作的代码,汇集一下,方便以后查看.日历天数变化代码为原创.> [增]: 复制代码代码如下: $("#select_id").append("<option value='Value'>Text</option>"); //为Select追加一个Option(下拉项) $("#select_id").prepend("&l
jquery 实现两Select 标签项互调示例代码

<html> <head> <base href="<%=basePath%>"> <title>My JSP 'index.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" c
jQuery中:selected选择器用法实例

本文实例讲述了jQuery中:selected选择器用法.分享给大家供大家参考.具体分析如下: 此选择器能够匹配被选择的<option>元素. 语法结构: 复制代码代码如下: $(":selected") 此选择器可以和其他选择器配合使用,比如类选择器.元素选择器等等.例如: 复制代码代码如下: $(".myselect :selected").css("color","red") 以上代码能够将类名为myse
jquery取消选择select下拉框示例代码

有三个select下拉框一个大类,两个小类隐藏,需要在选择大类的时候,小类显示同时清除另外的小类选择的项这需求有点儿.......... 下面是三个select: 复制代码代码如下: <select name="pWaqqqy" id="sel_type" onchange="selectFunction()"> <option value="">全部</option>
jquery实现省市select下拉框的替换(示例代码)

省市对应的实现:<还有一些没封装起来> 更具选择的省份来确定市的内容 jsp代码: 复制代码代码如下: <body> 省份<select name="prin"> <option>--请选择--</option> <option>福建</option> <option>北京</option> <option>山东</option>
jquery使用ul模拟select实现表单美化的方法

本文实例讲述了jquery使用ul模拟select实现表单美化的方法.分享给大家供大家参考.具体如下: 这里使用jquery实现ul模拟select,是jQuery插件实现的Select下拉菜单效果,类似的功能网上已经有一些了,每一款都代表了不同的编程思路,为学习提供一份参考. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-ul-select-table-codes/ 具体代码如下: <!DOCTYPE html PUBLIC &qu
基于JQuery实现的Select级联

复制代码代码如下: $(document).ready(function(){ $("#precinct").change(function(){ $("#ptype").val("");//重置所有 $("#stype").html(""); $("#stype").append("<option value=\"\">--请选择--<
jquery操作select方法汇总

本文实例汇总了jquery操作select的方法.分享给大家供大家参考.具体如下: jQuery获取Select选择的Text和Value: 语法解释: 复制代码代码如下: $("#select_id").change(function(){//code...});//为Select添加事件,当选择其中一项时触发 var checkText=$("#select_id").find("option:selected").text();
jQuery实现的仿select功能代码

本文实例讲述了jQuery实现的仿select功能.分享给大家供大家参考.具体如下: 这里重新再次与大家分享jQuery仿select功能,这个实现起来倒不复杂,就当研究一下jQuey插件的用法啦,还望大家喜欢. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-fselect-cha-method-codes/ 具体代码如下: <!dooCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Stri
jQuery取得设置清空select选择的文本与值

获取select : 获取select 选中的 text : $("#ddlregtype").find("option:selected").text(); 获取select选中的 value: $("#ddlregtype ").val(); 获取select选中的索引: $("#ddlregtype ").get(0).selectedindex; 设置select: 设置select 选中的索引: $("#d
jquery 操作两个select实现值之间的互相传递

复制代码代码如下: function moveToRight(select1,select2)//把选中的移动到右边 sleect1和sleect2分别是下拉列表框的ID{ $('#'+select1+' option:selected').each(function(){ $("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>").append
jquery实现动态操作select选中

今天因为有项目需要动态操作select选中习惯在百度上搜了一下 ,结果还是挺多的.试了其中一个发现不能使用.打开第2,3 个发现都是一样的然后自己稍微研究了一下复制代码代码如下: //初始化select,第一个选中 $('#stoStoreCategoryID').get(0).selectedIndex=0; $("#stoStoreCategoryID option").each(function(i,n){
jQuery制作简洁的多级联动Select下拉框

今天我们要来分享一款很实用的jQuery插件,它是一个基于jQuery多级联动的省市地区Select下拉框,并且值得一提的是,这款联动下拉框是经过自定义美化过的,外观比浏览器自带的要漂亮许多.另外,这个Select下拉框也可以绑定下拉事件,并获取当前选中项的值. html代码: 复制代码代码如下: <div class="wrap"> <div class="nice-select" name="nice-select&
JQuery select（下拉框）操作方法汇总

1. 获取选中项: 获取选中项的Value值: 复制代码代码如下: $('select#sel option:selected').val(); 或者复制代码代码如下: $('select#sel').find('option:selected').val(); 获取选中项的Text值: 复制代码代码如下: $('select#seloption:selected').text(); 或者复制代码代码如下: $('select#sel').find('option:selected'

jquery制作select列表双向选择示例代码

相关推荐

随机推荐