js双向选择器（下）

最新推荐文章于 2024-06-21 14:26:18 发布

诺丽果

最新推荐文章于 2024-06-21 14:26:18 发布

阅读量1k

点赞数

分类专栏：双向选择器文章标签：双向选择器

本文链接：https://blog.csdn.net/weixin_39309867/article/details/79615123

版权

这篇博客展示了如何使用JavaScript实现双向选择器，并在用户选择后保存功能。通过AJAX从服务器获取数据填充选择器，然后通过操作DOM实现元素在两个选择器之间的移动，同时提供了保存选择到服务器的逻辑。

摘要由CSDN通过智能技术生成

这次增加了双向选择器选择之后实现保存功能，详情见代码吧！

1.jsp：

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="contextpath" value="${pageContext.request.contextPath}" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="${contextpath}/css/style.css" rel="stylesheet"
type="text/css" />
<title>自动巡检模式</title>
<script src="${contextpath}/page/js/jquery.min.js"></script>
<script src="${contextpath}/page/js/jquery.js"></script>

<script type="text/javascript">
$(document).ready(
function() {

$.ajax({
url : "wSelectpos.action",
dataType : "json",
type : "post",
success : function(data) {
//因为我的json的格式是{"result":"true","msg":"连接成功","info":[{"descr":"机柜1","flag":"定位点1","PosId":1,"x":0.4,"y":-3.1,"tag":"000000","yaw":-2.34}]}
//所以需要找到json中的info对应的值
var infos = data.info;
for (var i = 0; i < infos.length; i++) {
$("#s1").append(
"<option value='"+infos[i].PosId+"'>"
+ infos[i].descr + infos[i].flag
+ "</option>");

}
},
error : function() {

}
});

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

$("option:selected", this).clone().appendTo("#s2");
$("option:selected", this).remove();
//$("#s1 option:first,#s2 option:first").attr("selected",true);
});
$("#s2").dblclick(function() {
$("option:selected", this).clone().appendTo("#s1");
$("option:selected", this).remove();
//$("#s1 option:first,#s2 option:first").attr("selected",true);
});

$("#add").click(function() {
$("#s1 option:selected").clone().appendTo("#s2");
$("#s1 option:selected").remove();
//$("#s1 option:first,#s2 option:first").attr("selected",true);
});

$("#remove").click(function() {
$("#s2 option:selected").clone().appendTo("#s1");
$("#s2 option:selected").remove();
//$("#s1 option:first,#s2 option:first").attr("selected",true);
});

$("#addall").click(function() {
$("#s1 option").clone().appendTo("#s2");
$("#s1 option").remove();
//$("#s1 option:first,#s2 option:first").attr("selected",true);
});

$("#removeall").click(function() {
$("#s2 option").clone().appendTo("#s1");
$("#s2 option").remove();
//$("#s1 option:first,#s2 option:first").attr("selected",true);
});
});
//点击双向选择器的确定按钮
function choose() {
var obj = document.getElementById("s2");
//$("#s2")选择的值
var chooseStr = "";
alert(obj.length);
//var index=obj.selectedIndex; //序号，取当前选中选项的序号
var val;
for (var i = 0; i < obj.length; i++) {
val = obj.options[i].value;

最低0.47元/天解锁文章

诺丽果

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js双向选择器（下）

这次增加了双向选择器选择之后实现保存功能，详情见代码吧！1.jsp：&lt;%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%&gt;&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http:/
复制链接

扫一扫