双面多选框亮点问题ASP经典
问题描述：
我具有双面多选择框的表单页面上工作。框1将从服务器加载所有可用的日期。当双击或选择并单击>时，框1选项将移动到框2.框2选项将被突出显示和选择。
期间保存，我在JavaScript代码中的一个附加no.selected = true来选择框2的所有选项并保存。
但是，当我在编辑模式下输入的页面，我有一些问题：
1.页面加载后，所有被选择的选项将被加载并在框2.突出显示我必须再次选择加入预先选择它们=选择标签中的'selected'。这将使它们保持选中状态，以便当我更新时，我将设法获取它们的值并根据更新记录。 2.但是，当我点击一个选项从框2转移回框1时，所有内容都在框1和框2中选中并突出显示，有没有办法在框中选择东西？ 3.我不介意框2始终保持选定状态，但是有CSS还是隐藏选定的亮点？ 4.在保存和更新期间，我需要服务器管理以请求box2中选项标记的值。我所做的是以长字符串的形式请求所有的值，然后分割并保存。如果选项没有被选中，我无法设法获取这些值。同样，如何让选项在从方框1移动到方框2时保持选定状态？ 5.双击一次，它会在框1中选择全部？请参阅 Double click highlight Box1 issue. 6后退或转回将在深灰色再次凸显箱1？请参阅Transfer back highlight Box 1 issue双面多选框亮点问题ASP经典
要所有的大师们，请帮帮我，非常感谢你。
<%
sHOL_ID= request("txtHOL_ID")
iPage = request("Page")
sSearch = request("txtSearch")
sModeSub = request("sub")
if sHOL_ID <> "" then
sID = sHOL_ID
else
sID = UCase(reqForm("txtID"))
end if
sName= reqForm("txtName")
sMainURL = "tmholcal.asp?"
sAddURL = "txtSearch=" & server.HTMLEncode(sSearch) & "&Page=" & iPage
if sModeSub = "up" then
arr=Split(reqform("ToLB"),",")
if Ubound(arr) < 0 then
response.write "<script language='javascript'>"
response.write "if (confirm(""Emptying the selected box will delete the Holiday Calendar Code"")==0)"
response.write " {window.history.back();}"
response.write "</script>"
end if
sSQL = "delete from TMHOL1 where HOL_ID = '" & sID & "'"
conn.execute sSQL
for j = 0 to Ubound(arr)
sDt_Hol = arr(j)
j = j + 1
sPart = arr(j)
sSQL = "insert into tmhol1 (HOL_ID,NAME,DT_HOL,PART,USER_ID,DATETIME) "
sSQL = sSQL & "values ("
sSQL = sSQL & "'" & pRTIN(sID) & "',"
sSQL = sSQL & "'" & pRTIN(sName) & "',"
sSQL = sSQL & "'" & fdate2(sDt_Hol) & "',"
sSQL = sSQL & "'" & pRTIN(sPart) & "',"
sSQL = sSQL & "'" & session("USERNAME") & "',"
sSQL = sSQL & "'" & fdatetime2(Now()) & "'"
sSQL = sSQL & ") "
conn.execute sSQL
Next
sAddURL = "txtSearch=" & sSearch & "&Page=" & iPage
call confirmBox("Update Successful!", sMainURL&sAddURL&"&txtHOL_ID=" & sID & "")
elseif sModeSub = "save" then
if sID = "" then
alertbox(" Holiday Calendar Code cannot be empty! ")
end if
arr=Split(reqform("ToLB"),",")
for i = 0 to Ubound(arr)
sDt_Hol = arr(i)
i = i + 1
sPart = arr(i)
sSQL = "insert into tmhol1 (HOL_ID,NAME,DT_HOL,PART,USER_ID,DATETIME) "
sSQL = sSQL & "values ("
sSQL = sSQL & "'" & pRTIN(sID) & "',"
sSQL = sSQL & "'" & pRTIN(sName) & "',"
sSQL = sSQL & "'" & fdate2(sDt_Hol) & "',"
sSQL = sSQL & "'" & pRTIN(sPart) & "',"
sSQL = sSQL & "'" & session("USERNAME") & "',"
sSQL = sSQL & "'" & fdatetime2(Now()) & "'"
sSQL = sSQL & ") "
conn.execute sSQL
call confirmBox("Save Successful!", sMainURL&sAddURL&"&txtHOL_ID=" & sID & "")
next
end if
function ShowAvailDates(sParam)
Set rs=server.CreateObject("ADODB.Recordset")
sql="Select * from tmhol "
sql=sql & "order by dt_hol"
rs.open sql, conn
if len(sParam) > 0 then
do while not rs.eof
bflag=true
Set rs1=server.CreateObject("ADODB.Recordset")
sql="Select * from tmhol1 "
sql = sql & " where hol_id = '" & sParam & "'"
sql = sql & " order by dt_hol"
rs1.open sql, conn
do while not rs1.eof
if fdate2(rs("DT_HOL")) = fdate2(rs1("DT_HOL")) then
bflag= false
exit do
end if
rs1.movenext
loop
if bflag = true then
response.write "<option value='" & rs("DT_HOL") & "," & rs("PART") & "'>" & rs("DT_HOL") & " - " & rs("PART") & "</option>"
end if
rs.movenext
loop
else
do while not rs.eof
if year(rs("DT_HOL")) = year(date) then
response.write "<option value='" & rs("DT_HOL") & "," & rs("PART") & "'>" & rs("DT_HOL") & " - " & rs("PART") & "</option>"
end if
rs.movenext
loop
pCloseTables(rs)
end if
end function
Set rstTMHOL1 = server.CreateObject("ADODB.RecordSet")
sSQL = "select * from TMHOL1 where HOL_ID ='" & sID & "'"
rstTMHOL1.Open sSQL, conn, 3, 3
if not rstTMHOL1.eof then
sName = rstTMHOL1("Name")
end if
%>
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
<!-- #include file="include/header.asp" -->
<!-- Left side column. contains the logo and sidebar -->
<!-- #include file="include/sidebar_tm.asp" -->
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header">
<h1>Holiday Calendar Details</h1>
</section>
<!-- Main content -->
<section class="content">
<div class="row">
<div class="col-md-12">
<div class="box">
<!-- /.box-header -->
<div class="box-body ">
<form name="form1" class="form-horizontal" action="tmholcal_det.asp" method="POST">
<input type="hidden" name="Page" value='<%=iPage%>' />
<div class="form-group">
<label class="col-sm-3 control-label">Holiday Calendar Code : </label>
<div class="col-sm-7">
<% if sHOL_ID <> "" then %>
<span class="mod-form-control"><% response.write sHOL_ID%> </span>
<input type="hidden" id="txtID" name="txtID" value="<%=sHOL_ID%>" />
<%else%>
<input class="form-control" id="txtID" name="txtID" value="<%=sID%>" maxlength="30" style="text-transform: uppercase" input-check />
<% end if %>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Name : </label>
<div class="col-sm-7">
<input class="form-control" id="txtName" name="txtName" value="<%=server.Htmlencode(sName)%>" maxlength="30">
</div>
</div>
<!--<div class="form-group">
<label class="col-sm-3 control-label">Year : </label>
<div class="col-sm-2">
<%if sSHFPAT_ID <> "" then%>
<span class="mod-form-control"><% response.write sYear%> </span>
<input type="hidden" id="selYear" value="<%=sYear%>" />
<%else%>
<select name="selYear" id="selYear" class="form-control">
<%For i = 1 to 34
selyear = Cint(2016) + Cint(i)
%>
<option value="<%=selyear%>" <%if sYear = selyear then%>Selected<%end if%>><%=selyear%></option>
<%Next%>
</select>
<% end if %>
</div>
</div>-->
<div>
<table id="example1">
<tbody>
<tr>
<td width="5%"></td>
<td width="20%" style="padding: 7px"><b>Available Dates :</b>
<select multiple size="15" style="width: 405px;" name="FromLB" id="FromLB" ondblclick="move(this.form.FromLB,this.form.ToLB)">
<%
ShowAvailDates(sHOL_ID)
%>
</select>
</td>
<td width="3%" style="padding: 9px" align="center">
<input type="button" class="btn btn-primary" style="width: 50px" onclick="move(this.form.FromLB, this.form.ToLB)" value=" > ">
<br>
<br>
<input type="button" class="btn btn-primary" style="width: 50px" onclick="move(this.form.ToLB, this.form.FromLB)" value=" < ">
</td>
<td width="30%" style="padding: 11px"><b>Selected : </b>
<select multiple size="15" style="width: 405px;" name="ToLB" id="ToLB" ondblclick="move(this.form.ToLB,this.form.FromLB)">
<% Set rstTMHOL1 = server.CreateObject("ADODB.RecordSet")
sSQL = "select * from TMHOL1 where HOL_ID ='" & sID & "'"
rstTMHOL1.Open sSQL, conn, 3, 3
do while not rstTMHOL1.eof
response.write "<option value='" & rstTMHOL1("DT_HOL") & "," & rstTMHOL1("PART") & "' selected='selected'>" & rstTMHOL1("DT_HOL") & " - " & rstTMHOL1("PART") & "</option>"
rstTMHOL1.movenext
loop
%>
</select>
</td>
</tr>
</tbody>
</table>
</div>
<div class="box-footer">
<%if sHOL_ID <> "" then %>
<a href="#" data-toggle="modal" data-target="#modal-delholcal" data-hol_id="<%=server.htmlencode(sHOL_ID)%>"
class="btn btn-danger pull-left" style="width: 90px">Delete</a>
<button type="submit" name="sub" value="up" class="btn btn-info pull-right" style="width: 90px">Update</button>
<%else%>
<button type="submit" name="sub" value="save" class="btn btn-default pull-right"
style="width: 90px">
Save</button>
<%end if%>
</div>
</form>
</div>
<!-- /.box-body -->
</div>
</div>
<!-- /.col -->
</div>
<!-- /.row -->
<div class="modal fade bd-example-modal-lg" id="modal-delholcal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="exampleModalLabel"></h4>
</div>
<div class="modal-body">
<div id="del-content">
<!--- Content ---->
</div>
</div>
</div>
</div>
</div>
</section>
<!-- /.content -->
</div>
<!-- /.content-wrapper -->
<!-- #include file="include/footer.asp" -->
</div>
<!-- ./wrapper -->
<!-- input-check -->
<script src="plugins/Custom/input-check.js"></script>
<script>
$('#modal-delholcal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var hol_id = button.data('hol_id')
var modal = $(this)
modal.find('.modal-body input').val(hol_id)
showDelmodal(hol_id)
})
function showDelmodal(str){
var xhttp;
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("del-content").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "tmholcal_del.asp?txtstring="+str, true);
xhttp.send();
}
</script>
<script>
function move(tbFrom, tbTo) {
var arrFrom = new Array(); var arrTo = new Array();
var arrLU = new Array();
var i;
for (i = 0; i < tbTo.options.length; i++) {
arrLU[tbTo.options[i].text] = tbTo.options[i].value;
arrTo[i] = tbTo.options[i].text;
}
var fLength = 0;
var tLength = arrTo.length;
for(i = 0; i < tbFrom.options.length; i++) {
arrLU[tbFrom.options[i].text] = tbFrom.options[i].value;
if (tbFrom.options[i].selected && tbFrom.options[i].value != "") {
arrTo[tLength] = tbFrom.options[i].text;
tLength++;
} else {
arrFrom[fLength] = tbFrom.options[i].text;
fLength++;
}
}
tbFrom.length = 0;
tbTo.length = 0;
var ii;
for(ii = 0; ii < arrFrom.length; ii++) {
var no = new Option();
no.value = arrLU[arrFrom[ii]];
no.text = arrFrom[ii];
no.selected = true;
tbFrom[ii] = no;
}
for(ii = 0; ii < arrTo.length; ii++) {
var no = new Option();
no.value = arrLU[arrTo[ii]];
no.text = arrTo[ii];
no.selected = true; // I enable it because when
tbTo[ii] = no;
}
}
</script>
</body>
答
基本上我弄错了。我应该删除javascript代码所有no.selected = TRUE，并添加以下的Jquery
$(document).ready(function() {
$('#btnUp').click(function() {
$('#ToLB').each(function() {
$('#ToLB option').attr("selected", "selected");
});
});
});
$(document).ready(function() {
$('#btnSave').click(function() {
$('#ToLB').each(function() {
$('#ToLB option').attr("selected", "selected");
});
});
});
基本上jQuery将选择所有的选项点击btnSave或btnUpdate时。
因此，服务器将管理拿起选项变量的值。