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

最新推荐文章于 2022-05-20 14:15:40 发布

爱挖坑的小白

最新推荐文章于 2022-05-20 14:15:40 发布

阅读量1.5k

点赞数 1

分类专栏：前端插件文章标签： javascript 插件

本文链接：https://blog.csdn.net/u010090106/article/details/78842274

版权

前端插件专栏收录该内容

1 篇文章 0 订阅

订阅专栏

最近的项目用到了多选下拉框，选择了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的源码，会对使用有很大帮助

爱挖坑的小白

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于修改页面带下拉框的选中问题

最近的项目用到了多选下拉框，选择了bootstrap-multiselect.js插件，在修改界面要求之前选定的下拉框可以回带显示，在这里遇到了问题，一般的前台框架会根据传回的value的值来选中，但是这里并不可以于是上网查得到方法一： "gpr" id="gpr" onchange= "change(this.value)" >
复制链接

扫一扫