Select 选中值左右移动和Checkbox 全选/全不选

最新推荐文章于 2024-05-27 10:56:03 发布

我爱吃红薯

最新推荐文章于 2024-05-27 10:56:03 发布

阅读量342

点赞数

文章标签： select checkbox

本文链接：https://blog.csdn.net/qq_45315910/article/details/99861865

版权

select 选中值左右框移动

1，HTML 部分

<body>
	<div style="margin-right:30px;float:left;">
		<label>列表A</label><br>
	<!-- 	overflow-y:auto; //表示overflow-y属性指定如果它溢出了元素的内容区是否剪辑顶部/底部边缘内容。
		//auto:如果溢出框，则应该提供滚动机制。
		//scroll:裁剪内容 - 提供滚动机制。等等 -->
		<select id="leftSelect" name="unselected"  multiple size="10" style="width:150px;overflow-y:auto;">
			<option value="1" >诸葛亮</option>
			<option value="2" >刘备</option>
			<option value="3" >关云长</option>
			<option value="4" >张飞</option>
			<option value="5" >赵子龙</option>
		</select>
	</div>
	
	<div>
		<label>列表B</label><br>
		<select id="rightSelect" name="selected"  multiple size="10" style="width:150px;overflow-y:auto;">
			<option value="${userid}" >曹操</option>
		</select>
	</div>
</body>

2，JavaScript 部分

       <script type="text/javascript">
       		//选中左边-向右边移动
	       $("#leftSelect").click(function(){
	    	    var lsed=$("select option:selected");
		       	$("#rightSelect").append(lsed);
	    	  // console.log(lsed.length);//获取选中对象的长度。
	    	  //"this" 选中当前全部select元素对象（包含它的子）.
	    	    console.log(this);
	    	  //"select option:selected" 选中当前元素对象。
	    	    console.log($("select option:selected"));
	    	  //"$("select option:selected").val()" 选中当前元素对象value()值。
	    	    console.log($("select option:selected").val());
	       });
	       //选中右边-向左边移动
	       $("#rightSelect").click(function(){
		       	var rsed=$("select option:selected");
		       	$("#leftSelect").append(rsed);
	       });
       
       </script>

3，页面展示

checkbox 全选/全不选

1，HTML 部分

<body>
	<div>
		<table  border="1" >
			<thead>
				<tr>
					<th width="35"><input id="all_ck"  type="checkbox"></th>
					<th>编号</th>
					<th>名称</th>
					<th width="100">操作</th>
				</tr>
				<tr>
					<th width="35"><input id="ck" name="userid" type="checkbox" value="1"></th>
					<th>#001</th>
					<th>张三</th>
					<th width="50"><a href="#">add</a></th>
				</tr>
				<tr>
					<th width="35"><input id="ck" name="userid" type="checkbox" value="2"></th>
					<th>#002</th>
					<th>王五</th>
					<th width="50"><a href="#">del</a></th>
				</tr>
			</thead>
		</table>
	</div>
</body>

2， JavaScript 部分

      <script type="text/javascript">
	 	  //全选
	 	  $("#all_ck").click(function(){
	 		//  var flag=$("#all_ck").is(':checked');
	 		 var flag= this.checked;//上面获取或者使用this. 这样
	 		  $("input[name='userid']").each(function(i){
	 			this.checked=flag;
	 		  });
	 	  });
       </script>

3，页面展示

可以使用ajax 把 select 和checkbox 选中的项数据提交到后端：根据标签中的属性值name获取，原因是name值都一样，则可以获取数组类型数据String id[]。

我爱吃红薯

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Select 选中值左右移动和Checkbox 全选/全不选

select 选中值左右框移动1，HTML 部分<body> <div style="margin-right:30px;float:left;"> <label>列表A</label><br> <!-- overflow-y:auto; //表示overflow-y属性指定如果它溢出了元素的内容区是否剪辑顶部/...
复制链接

扫一扫