一个异步加载的下拉框

功能描述：          

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

碰到的难点：   

                  （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>
 

 

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>");
                    }
                }
            });
            }
        } 

     注意clickCount 是为了防止重复动态添加数据

  表单提交代码：

  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

 

谷歌浏览器版本：

下拉框代码：

<tr height="50px">
    <td class="active"><label class="pull-right">
       <font color="red">*</font>绑定数据源:</label></td>
	 <td class="width-35">
	    <select id="select_dataSourceList" name="issued_sub_key_c" class="form-control required" style="width:50%;height:33px;" >
            </select>
	</td> 
			
</tr>

 

JS 代码：

$(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(list[i].id == $("#hiddenSourceId").val())
						      $("#select_dataSourceList").append(" <option "+" "+ "selected="+"selected" +" "+ "value="+$("#hiddenSourceId").val() +" "+">"+list[i].orgName+"</option>");
			        else
						      $("#select_dataSourceList").append(" <option "+"value="+list[i].id +" "+">"+list[i].orgName+"</option>");					    	 
					}
				}
			});

 

效果图：

添加：