两个下拉框的纠葛

Posted 2020-08-30

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

总结：

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