来自 关于计算机 2019-09-04 19:49 的文章
当前位置: 六合联盟网 > 关于计算机 > 正文

标签项互调示例代码,jQuery实现的仿select功能代

本文实例叙述了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" content="no-cache">
<meta http-equiv="expires" content="0"> 
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
</head>


<SCRIPT LANGUAGE="JavaScript">
<!--
$(document).ready(function() {
$("#toRight").click(function(){
$("#selectLeft option:selected").each(function(){
$("#selectRight").append("<option value=" + $(this).val() + ">" + $(this).html() + "</option>");
$(this).remove();
});
});

$("#toLeft").click(function(){
$("#selectRight option:selected").each(function(){
$("#selectLeft").append("<option value=" + $(this).val() + ">" + $(this).html() + "</option>");//这个方法是默认在后面添加
//$("#selectLeft option:first").before("<option value=" + $(this).val() + ">" + $(this).html() + "</option>"); //此种方法是在select前面加内容
//$("#selectLeft option[value=3]").before("<option value=" + $(this).val() + ">" + $(this).html() + "</option>"); //此种方法是在selectt指定某一行加内容
$(this).remove();
});
});

});
//-->
</SCRIPT>


<BODY>
<table>
<tr>
<td>
<select size='10' multiple id="selectLeft" style="width:200px">
<option value="0">Jquery API</option>
<option value="1">JavaScript高级程序设计</option>
<option value="2">锋利的jQuery</option>
<option value="3">JavaScript 设计模式</option>
<option value="4">JavaScript+DOM高级程序设计</option>
<option value="5">PHP高级程序设计</option>
<option value="6">面向对象程序设计</option>
</select>
</td>
<td>
<input type="button" value=" >> " id="toRight" /><br /><br />
<input type="button" value=" << " id="toLeft" />
</td>
<td>
<select size='10' multiple id="selectRight" style="width:200px">
</select>
</td>
</tr>
</table>
</BODY>
</HTML>

此地再一次再一次与我们大快朵颐jQuery仿select功用,那么些落成起来倒不复杂,就当商讨一下jQuey插件的用法啊,还望我们喜欢。

您或者感兴趣的篇章:

  • jQuery结合CSS制作精良的select下拉菜单
  • 基于jquery完毕select选用框内容左右活动加多删减代码分享
  • jQuery完结的仿select功效代码
  • jquery使用ul模拟select达成表单美化的点子
  • jquery完成select下拉框美化特效代码分享
  • jquery完结动态操作select选中
  • Jquery对select的增、删、改、查操作
  • jquery操作select方法汇总
  • jQuery制作简单的家家户户联动Select下拉框
  • jQuery实现充裕实用美丽的select下拉菜单选择效果

运维效果截图如下:

图片 1

在线演示地址如下:

实际代码如下:

<!dooCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta charset=utf-8>
<script src="js/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="js/jquery.select.js" type="text/javascript"></script>
<title>jQuery select</title>
</head>
<style>
.select-my ul,.select-my li{
 margin:0;padding:0;
}
.select-my{
 position:absolute;
 min-width:100px;
 *width:100px;
 left:100px;
 top:20px;
 border:1px solid #aaa;
 border-bottom:none;
} 
.select-my b{
 float:left;
} 
.select-my span{
 float:right;
}
.select-my li{
 width:100%;
 min-height:20px;
 *height:20px;
 border-bottom:1px solid #aaa;
 line-height:20px;
 vertical-align:middle;
}
.select-my img{
 line-height:20px;
 vertical-align:middle; 
}
.select-my .select-my-list{
 border-bottom:none;
}
.select-my .select-my-list{
 display:none;clear:both;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
 $('#select-1').makeSelect({
  className:'my',
   dataValue:[1,2,3],
   dataHtml:['1','二','3'],
   callback:function(){
   $('#msg').val( $('#select-1').val() );//显示选中的值
   }
 });
 $('#select2').makeSelect({
  description:'请',
  logo:['▽','△'],
  className:'',
   dataValue:[1,2,3],
   dataHtml:['<img src=images/a1.jpg width=20 height=20 />1','<img src=images/a2.jpg width=20 height=20 />二','<img src=images/a3.jpg width=20 height=20 />33ssssssssssaaa'],
   callback:function(){
   $('#msg').val( $('#select2').val() );//显示选中的值
   }
 });
});
</script>
<body>
<div class="select" id="select-1"></div>
<div id="select2" style="position:absolute;top:200px;left:200px;">select2</div> 
<div style="position:absolute;left:300px;top:330px;">被选中的值是<input type="text" id="msg"/></div>
</body>
</html>

期待本文所述对大家的jquery程序设计有所匡助。

你或然感兴趣的小说:

  • jQuery结合CSS制作能够的select下拉菜单
  • 传说jquery达成select选用框内容左右平移增多删减代码分享
  • jquery使用ul模拟select完结表单美化的法子
  • jquery完毕select下拉框美化特效代码分享
  • jquery落成动态操作select选中
  • Jquery对select的增、删、改、查操作
  • jquery操作select方法汇总
  • jQuery制作轻松的每家每户联合浮动Select下拉框
  • jquery 实现两Select 标签项互调示例代码
  • jQuery达成足够实用美貌的select下拉菜单接纳效果

本文由六合联盟网发布于关于计算机,转载请注明出处:标签项互调示例代码,jQuery实现的仿select功能代

关键词: