1.说明:后台传来两个list(datelist/weeklist)分别要放入两个下拉框,而且两个list的值一一对应,即datelist.get(i)与weeklist.get(i)值相等,要达到的效果是---->若选中第一个下拉框的值(假设值的索引为index),第二个下拉框的值必须也显示索引为index的option,反之亦然。
2.想法:由于考虑了第二个下拉框虽可以对应显示,但是显示之后,无论是恶意还是非恶意用户,都可能会对第二个下拉框重新进行选择,所以想着选中一个下拉框,第二个下拉框对应显示之后,将第二个下拉框禁用,即disabled=true,结果是什么呢,说来很是愤怒,禁用之后,页面的值始终传不到servlet里,不论是重启服务器,还是一遍一遍的部署,控制台上显示的总是null。可是问题的来源只在那个范围内,修改了所有自己能想到的问题,没有改善,不知怎的,突然冒出来一个想法:总不能是disabled的问题吧,不管了,死马当活马医,抱着侥幸心理试了一试,果然是真的,禁用之后后台不能通过request.getParameters(name)获得值,那么问题来了,怎么预防那些恶意或非恶意用户的输入呢,思虑甚久后,我便开始抓耳挠腮,变得急躁,就开始在自己已经写好的程序上测试找成就感,结果是什么呢,我多虑了,选中第一个下拉框的值之后,如果再去选第二个下拉框的不对应的值,第一个下拉框的值也会跟着改变,根本不存在不对应数据存入数据库的问题。真是山重水复疑无路!
3.代码:
下拉框中放入值
<tr>
<td>会议日期:</td>
<!-- 用户可能先选日期也可能先选星期 -->
<td><select name="mrdate" id="mrdate" onchange="fillweek()">
<option value="">--请选择--</option>
<c:forEach items="${datelist}" var="date">
<option value="${date}"><c:out value="${date}"></c:out></option>
</c:forEach>
</select></td>
<td id="v4"></td>
</tr>
<tr>
<td>会议星期:</td>
<!-- 选了某个日期就要把对应星期加进去 -->
<td><select name="mrweek" id="mrweek" onchange="filldate()">
<option value="">--请选择--</option>
<c:forEach items="${weeklist}" var="week">
<option value="${week}"><c:out value="${week}"></c:out></option>
</c:forEach>
</select></td>
<td id="v5"></td>
</tr>
针对下拉框的JS校验代码
var mrdate = document.getElementById("mrdate");
var mrweek = document.getElementById("mrweek");
var v4 = document.getElementById("v4");
var v5 = document.getElementById("v5");
function fillweek(){
var index = mrdate.selectedIndex;
if(index != 0){
var op = mrweek.options;
op[index].selected = true;
//alert(op[index].value);
mrweek.value = op[index].value;
//alert(mrweek.value);
//mrweek.disabled = true;禁用下拉框会导致选中的值无法通过name传向servlet!!!
result = 1;
v4.innerHTML = "<span style='color:green'>YES</span>";
}else{
v4.innerHTML = "<span style='color:red;font-size: small;'>请选择一项</span>";
result = 0;
}
}
function filldate(){
var index = mrweek.selectedIndex;
if(index != 0){
var op = mrdate.options;
op[index].selected = true;
mrdate.value = op[index].value;
//alert(mrdate.value);
//mrdate.disabled = true;
result = 1;
v5.innerHTML = "<span style='color:green'>YES</span>";
}else{
v5.innerHTML = "<span style='color:red;font-size: small;'>请选择一项</span>";
result = 0;
}
}
注:其中的result与该问题无关,该变量用来汇总form表单中所有校验反馈,从而在表单提交的时候,如果所有用户输入导致的result皆为1,那么onsubmit()的返回值就是true,如下:
<form action="addReserve" method="post" onsubmit="return verify()">
总结:
思虑太多,反而易陷入怪圈不能自已。