我已经实现了多重选择，并且能够选择左侧的选项并将它们移动到右侧。
当我尝试使用 var multiselect_toval=$('#multiselect_to').val(); 获取 JavaScript 中选定的选项时，即使选择了选项，它也会返回 null。任何帮助将不胜感激。
JSP代码
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="ISO-8859-1">
<title> Dashboard</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<script src="javascriptf/jquery.js"></script>
<script src="multiselect/jquery-1.11.2.min.js"></script>
<script src="multiselect/multiselect.min.js"></script>
<script>
function updateLabel() {
var aap_dropDownval=$("#aap_dropDown").val();
var flag_dropDown=$("#flag_dropDown").val();
var run_dropDown=$("#run_dropDown").val();
var optiondropDown=$("#optiondropDown").val();
**var multiselect_toval=$('#multiselect_to').val();
alert("multi: "+multiselect_toval);**
$.ajax({
url: "ReportGenerator",
type: "POST",
data:{aapnval:aap_dropDownval,flagval:flag_dropDown,runval:run_dropDown,optionval:optiondropDown,multiselectval:multiselect_toval},
success: function(data) {
// Update the label with the received data
$("#errorlbl").text(data);
}
});
}
function getOption() {
selectElement =
document.querySelector('#optiondropDown');
output = selectElement.value;
if(output=="Full List")
{
document.getElementById('multiselectdiv').style.visibility = 'visible';
}
else{
document.getElementById('multiselectdiv').style.visibility = 'hidden';
}
}
jQuery(document).ready(function($) {
$('#multiselect').multiselect();
});
</script>
</head>
<body class="mb-2 bg-info-subtle text-info-emphasis d-grid gap-3">
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#" >
<img src="images/NovartisLogo.jpg" alt="" width="100%" height="50" >
</a>
<span class="display-6" style="width: 80%" >NRV Flagging Status Dashboard</span>
</nav>
<div class="container text-center">
<div class="row mb-5">
<div class="col">
<select class="btn btn-info dropdown-toggle" id="aap_dropDown">
<option class="btn btn-light">Application Name</option>
<option class="btn btn-light">App1</option>
<option class="btn btn-light">App2</option>
</select>
</div>
<div class="col">
<select class="btn btn-info dropdown-toggle" id="flag_dropDown">
<option class="btn btn-light">Flag</option>
<option class="btn btn-light">M1</option>
<option class="btn btn-light">M2</option>
<option class="btn btn-light">M3</option>
</select>
</div>
<div class="col">
<select class="btn btn-info dropdown-toggle" id="run_dropDown">
<option class="btn btn-light">Run</option>
<option class="btn btn-light">Run1</option>
</select>
</div>
<div class="col">
<select class="btn btn-info dropdown-toggle" name="optionName" id="optiondropDown" onchange="getOption()">
<option class="btn btn-light">Option</option>
<option class="btn btn-light">Summary</option>
<option class="btn btn-light">Full List</option>
</select>
</div>
</div>
</div>
<div class="row d-flex justify-content-center" id="multiselectdiv" onblur="updateUI()" style="visibility:hidden">
<div class="col-md-auto" >
<select name="from[]" id="multiselect" class="form-control" size="5" multiple="multiple" style="border: 1px solid black">
<option>app_name</option>
<option>idname</option>
<option>business_name</option>
<option>current_flag</option>
<option>old_flag</option>
<option>run</option>
<option>path</option>
</select>
</div>
<div class="col-md-auto d-grid gap-1">
<button type="button" id="multiselect_rightAll" class="col-md-auto" style="border: 1px solid black;">>></button>
<button type="button" id="multiselect_rightSelected" class="col-md-auto" style="border: 1px solid black;">></button>
<button type="button" id="multiselect_leftSelected" class="col-md-auto" style="border: 1px solid black;"><</button>
<button type="button" id="multiselect_leftAll" class="col-md-auto" style="border: 1px solid black;"><<</button>
</div>
<div class="col-md-auto">
<select name="to[]" id="multiselect_to" class="form-control" size="5" multiple="multiple" style="border: 1px solid black"></select>
</div>
</div>
<div class="d-flex justify-content-center">
<button type="submit" class="btn btn-success" onclick="updateLabel()">Submit</button>
</div>
<div class="d-flex justify-content-center" id="labelContainer">
<%-- <label id="errorlbl" class="text-danger" style="font-weight:bold;" ><%=errlbl%></label> --%>
<label id="errorlbl" class="text-danger" style="font-weight:bold;" ></label>
</div>
</body>
</
html>
这是您正在使用的
multiselect.min.js1.11.2不可能详细介绍这个库，因为它似乎是本地服务的（而不是像 Bootstrap 这样的 CDN），并且有 so 许多多选库，包括多个用于 jQuery UI 的库。
但我可以做出一些猜测并针对一般情况提供建议：
#multiselect_tomultiselect.min.js<div><div>因此，在实际的 JS 中，
document.querySelect('#multiselect_to').value<select>在 jQuery 中，包装代码
$('#multiselect_to').val()multiselect.min.js.val()更可能的是，考虑到 jQuery
1.11$('#multiselect').multiselect()$('#multiselect').multiselect(onSetCallbackFn)$('#multiselect').multiselect().value()$('#multiselect').on('multiselected', onSetCallbackFn)15 年前，我们还没有真正标准化组件的任何最佳实践，因此对于每个 jQuery 组件，您都需要了解具体的实现细节。