两个下拉框的纠葛

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()">

总结:

     思虑太多,反而易陷入怪圈不能自已。

posted @ 2017-02-07 19:33  一昭一弦  阅读(317)  评论(0编辑  收藏  举报