关于修改页面带下拉框的选中问题

来源：互联网发布：软件安装包备份编辑：程序博客网时间：2024/06/03 16:46
最近的项目用到了多选下拉框，选择了bootstrap-multiselect.js插件，在修改界面要求之前选定的下拉框可以回带显示，在这里遇到了问题，一般的前台框架会根据传回的value的值来选中，但是这里并不可以于是上网查得到
方法一：
 <BODY>
  <select name="gpr" id="gpr" onchange= "change(this.value)" > 
                <option value="1" >班级1
                <option value="2">班级2



                <option value="3">班级3
                <option value="4">班级4
                <option value="5">班级5
  </select> 
 
  <SCRIPT LANGUAGE="JavaScript">
  <!--
    var x = '3';//这个是上次选中的值,你应该放到request中返回的时候可以取到
    var sel = document.getElementById('gpr');
    for(var i=0;i<sel.options.length;i++){
        if(sel.options[i].value==x){
            sel.options[i].selected=true;break;
        }
    }
 
    function change(pm){
        //submit form
    }
  //-->
  </SCRIPT>
 </BODY>
这种方法在一般的单选框是可以使用的，用到这里发现不能生效
于是  方法二：
<select name="building" class="louyu_xiala_kt" id="hospitalSel"
                                onmouseover="FixWidth(this)">
                                <option value="0">--请选择--</option>
                                <c:forEach items="${listBuilding}" var="build">
                                    <option value="${build.sequence}" ${build.sequence==building?'selected' : ''}>
                                        ${build.name }
                                    </option>
                                </c:forEach>
                            </select>
在页面上使用了运算符进行操作，但是也不好使
经过了一番查阅，发现了一种方法，略加修改，可以使用
正确方法：
JS:function getselect(){
   //待会下拉框
   var jobId = ${job.jobId};
             $.ajax({
                headers:{"csrf":"${csrf}"},
                type:"POST",
                url:"${contextPath}/job/getselect?",
                data:{
                    "jobId":jobId,
                },
                success:function(r) {
                 var deplist = r.data.result.deplist;//下拉框1的id
                 var strlist = r.data.result.strlist;//下拉框2select的id
                 var list = r.data.result.list;
                 var depmm=[];构造
                 var strmm=[];
                 var myMap = new Map();
                    for(var j=0;j<list.length;j++){
                        //塞入键值对
                        myMap.set(list[j].jobName,list[j].jobId);
                    }
                    myMap.forEach(function(value, key) {//所有的下拉
                        //此部分应该获取后台初始选中的值，进行判断，给其加上selected:true属性
                         for (var i = 0; i < deplist.length; i++) {  
                                 // 添加选项  
                   if(value==deplist[i].depdJobId ){//写死的数据
                   depmm.push({label:key,value:value,selected:true})
                        }
                  }
                        depmm.push({label:key,value:value}); 
                        })
                    $("#dependenceid").multiselect('dataprovider', depmm);
                    $('#dependenceid').multiselect('refresh');
                    myMap.forEach(function(value, key) {//所有的下拉
                        //此部分应该获取后台初始选中的值，进行判断，给其加上selected:true属性
                         for (var i = 0; i < strlist.length; i++) {  
                                 // 添加选项  
                   if(value==strlist[i].streamJobId ){//写死的数据
                   strmm.push({label:key,value:value,selected:true})
                        }       
                  } 
                         strmm.push({label:key,value:value});
                        })    
                    $("#streamid").multiselect('dataprovider', strmm);
                    $('#streamid').multiselect('refresh');
                 
                      
                              } 
       }); 
  };            
  getselect();
jsp：
<select
      class="multiselect" multiple="multiple" id="dependenceid"
      name="dependenceid">
      <c:forEach items="${jobs}" var="list">
       <option value="${list.jobId}">${list.jobName}</option>
      </c:forEach>
     </select>

<select
      class="multiselect" multiple="multiple" id="streamid"
      name="streamid">
      <c:forEach items="${jobs}" var="list">
       <option value="${list.jobId}">${list.jobName}</option>
      </c:forEach>
     </select>

大家有兴趣可以看看bootstrap-multiselect.js的源码，会对使用有很大帮助
阅读全文
0 0