mui中点击按钮弹出层可供选择数据自动填充

jsp <div class="mui-input-row" style="line-height: 15px;">
      <label>调动职务</label>
      <span id='transferPositionName'><font style="color:#959595;">选择职务</font></span>
       <input type="hidden" id="transferPosition" value=""/>
</div>

<div class= "tddivShow" id="tddiv" style="display: none;">
    <header class="mui-bar mui-bar-nav tdheader">
      <span id="closetd"><i class="icon iconfont" style="font-size: 20px;color: #C6C6C6;line-height: 35px;float: right;">&#xeb7d;</i></span>
       <h1 class=" titles">选择职务</h1>
     </header>
   <div class="mui-scroll-wrapper" id="td_scroll" style="padding-top:2px;">
   <div class="mui-scroll">
      <div class="mui-input-row mui-search zwsearch" id="zwsearch">
      <input type="search" class="mui-input-clear mui-indexed-list-search-input" onfocus="setfocus(this)" oninput="setinput(this);" placeholder="搜索职 务" >
       </div>
       <div id = "tdul">
       </div>
  </div>
  </div>
</div> JS var TempvalueArr=[];//存储li的value var TempnameArr=[];//存储li的name 填充数据 var msg = "<ul class='mui-table-view'>"; $.each(data.hrSchoolmovetypelista,function(index,transferPosition){ msg+="<li class='mui-table-view-cell mui-indexed-list-item liname' value='"+transferPosition.value+"'>"+transferPosition.name+"</li>"; TempvalueArr[index] = transferPosition.value; TempnameArr[index] = transferPosition.name; }); msg +="</ul>"; $("#tdul").html(msg); mui("#tdul").on('tap','.liname',function(){ var value = this.getAttribute("value"); var name = this.innerText; $("#transferPosition").val(value); $("#transferPositionName").html(name); $("#tddiv").css("display","none"); }); 搜索时调用 mui("#zwsearch").on('tap','.mui-icon-clear',function(){ var mdocment = $("#tdul"); mdocment.html(""); var msg = "<ul class='mui-table-view'>"; for(i=0;i<TempnameArr.length;i++){ msg+="<li class='mui-table-view-cell mui-indexed-list-item liname' value='"+TempvalueArr[i]+"'>"+TempnameArr[i]+"</li>"; } msg +="</ul>"; mdocment.append(msg); mui("#tdul").on('tap','.liname',function(){ var value = this.getAttribute("value"); var name = this.innerText; $("#transferPosition").val(value); $("#transferPositionName").html(name); $("#tddiv").css("display","none"); }); }); 获取焦点时调用 function setfocus(this_){ var mdocment = $("#tdul"); mdocment.html(""); var msg = "<ul class='mui-table-view'>"; if(this_.value.length>0){ for(i=0;i<TempnameArr.length;i++){ if(TempnameArr[i].substring(0,this_.value.length).indexOf(this_.value)==0){ msg+="<li class='mui-table-view-cell mui-indexed-list-item liname' value='"+TempvalueArr[i]+"'>"+TempnameArr[i]+"</li>"; } } msg +="</ul>"; mdocment.append(msg); }else{ for(i=0;i<TempnameArr.length;i++){ msg+="<li class='mui-table-view-cell mui-indexed-list-item liname' value='"+TempvalueArr[i]+"'>"+TempnameArr[i]+"</li>"; } msg +="</ul>"; mdocment.append(msg); } mui("#tdul").on('tap','.liname',function(){ var value = this.getAttribute("value"); var name = this.innerText; $("#transferPosition").val(value); $("#transferPositionName").html(name); $("#tddiv").css("display","none"); }); } 输入框发生变化时调用 function setinput(this_){ var mdocment = $("#tdul"); mdocment.html(""); var msg = "<ul class='mui-table-view'>"; for(i=0;i<TempnameArr.length;i++){ if(TempnameArr[i].substring(0,this_.value.length).indexOf(this_.value)==0){ msg+="<li class='mui-table-view-cell mui-indexed-list-item liname' value='"+TempvalueArr[i]+"'>"+TempnameArr[i]+"</li>"; } } msg +="</ul>"; mdocment.append(msg); mui("#tdul").on('tap','.liname',function(){ var value = this.getAttribute("value"); var name = this.innerText; $("#transferPosition").val(value); $("#transferPositionName").html(name); $("#tddiv").css("display","none"); }); } 点击打开层 document.getElementById("transferPositionName").addEventListener('tap', function() { $("#tddiv").css("display","block"); mui('#td_scroll').scroll().scrollTo(0,0,100);//100毫秒滚动到顶; $("#tddiv").css("height",window.innerHeight-45+"px"); }); 点击关闭层 document.getElementById("closetd").addEventListener('tap', function() { $("#tddiv").css("display","none"); });
相关文章
相关标签/搜索