一个异步加载的下拉框

功能描述：

一个可以绑定数据源的下拉框，点击查看按钮可以查看此数据，并可以进行修改

碰到的难点：

（1）选定的数据，怎么带给后台

（2）因为绑定的数据在另外一张表单，且本entity存储的是id，而显示的要是其Name

（3）添加、查看、修改都是同一个页面，如何分别是添加还是修改

（4）下拉框如何默认显示

过程：首先很快就将动态加载下拉框做了出来，并且实现了添加功能中的绑定数据源，然后显示的时候是默认显示的数据源Id,而不是name，然后我在添加功能的时候将name 处理好了，后面就是进行修改绑定的数据源那里出现问题，出现sourceId undefined错误，排查问题发现是，修改（查看）onclick事件，未将sourceId 带给controller。最后最后处理完这些，原以为bug已修复。因为之前，一直用的火狐浏览器进行测试，后面用谷歌、IE、360浏览器时，发现下拉框一次性加载不出来，要点击两次才能完全加载。后面改成将 ajax 放在 ready（）中才得以解决。

版本一代码：火狐浏览器

下拉框代码：

<c:if test="${not empty planExe.sourceId}">
<select id="select_otherDataSourceList" name="issued_sub_key_c" class="form-control required" style="width:50%;height:33px;" onclick="bindOtherDataSource('${planExe.sourceId}')" >
            <option selected="selected">${planExe.dataSourceName}</option>
     </select>
</c:if>
<c:if test="${empty planExe.sourceId}">
   <select id="select_dataSourceList" name="issued_sub_key_c" class="form-control required" style="width:50%;height:33px;" onclick="bindDataSource()" >

</select>
</c:if>
</td>

Js代码：

添加部分：

clickCount =0;
   //使数据源列表只被点击加载一次
       function bindDataSource() {
           if(clickCount <1){
               clickCount++;
               $.ajax({
               method:"post",
               url:"${ctx}/datavalid/dataSource/findDataSourceList",
               dataType : "json",
               success:function(list){
                   for(var i=0;i < list.length;i++){
   $("#select_dataSourceList").append(" <option "+"value="+list[i].id +" "+ "title="+ list[i].orgName +">"+list[i].userName+"</option>");//动态加载下拉节点
                   }
               }
           });
           }
       }

       Count =0;
   //使数据源列表只被点击加载一次
       function bindOtherDataSource(id) {
           if(Count <1){
               Count++;
               $.ajax({
               method:"post",
               data:{"sourceId":id},
               url:"${ctx}/datavalid/dataSource/findOtherDataSourceList",
               dataType : "json",
               success:function(list){
                   for(var i=0;i < list.length;i++){
$("#select_otherDataSourceList").append(" <option "+"value="+list[i].id +" "+ "title="+ list[i].orgName +">"+list[i].userName+"</option>");
                   }
               }
           });
           }
       }

注意红色部分，绿色部分是使点击事件只一次有效，不会重复动态添加数据

表单提交代码：

    if(!$("#planId").val())
$("#inputForm").attr("action","${ctx}/datavalid/planExe/save?ids="+ids+"&sourceId="+$("#select_dataSourceList").val());
   else
$("#inputForm").attr("action","${ctx}/datavalid/planExe/save?ids="+ids+"&sourceId="+$("#select_otherDataSourceList").val());

       $("#inputForm").submit();

思路：我这里处理修改那部分的下拉框是将该数据源的id带到后台，然后返回除此id外的其他list集合，所以名称叫select_otherDataSourceList

谷歌浏览器版本：

简单很多，代码量也少了很多，上面的代码，我之前就是不好处理那个默认下拉框的问题，所以我才去访问后台得到除已经绑定（添加时绑定的）的数据源之外的list，但我下午写代码时，突然想到我为什么不将那个默认的option 设成 hidden呢，这样不仅不用传id，而且可以将ajax代码放入初始化函数 (ready（）)，两个onclike事件也可以共用同一个异步加载后台的代码，也解决了那个下拉框一次性不能加载的问题

下拉框代码：

<c:if test="${not empty planExe.sourceId}">
<select id="select_otherDataSourceList" name="issued_sub_key_c" class="form-control required" style="width:50%;height:33px;" onclick="bindOtherDataSource()" >
            <option selected="selected" hidden="true">${planExe.dataSourceName}</option>
           </select>
</c:if>
<c:if test="${empty planExe.sourceId}">
   <select id="select_dataSourceList" name="issued_sub_key_c" class="form-control required" style="width:50%;height:33px;" onclick="bindDataSource()" > </select> </c:if>

JS 代码：

function bindDataSource() {
       }
       function bindOtherDataSource() {
       }

$(document).ready(function() {
           //绑定数据源的数据加载
           $.ajax({
               method:"post",
               url:"${ctx}/datavalid/dataSource/findDataSourceList",
               dataType : "json",
               success:function(list){
                   for(var i=0;i < list.length;i++){
                       if(!$("#planId").val())
   $("#select_dataSourceList").append(" <option "+"value="+list[i].id +" "+ "title="+ list[i].orgName +">"+list[i].userName+"</option>");
                       else
   $("#select_otherDataSourceList").append(" <option "+"value="+list[i].id +" "+ "title="+ list[i].orgName +">"+list[i].userName+"</option>");
                   }
               }
           });

}

表单提交的代码一样