微信开发 select选择框 -云博客

微信开发 select选择框

# 微信 2024-05-05 22:16 0 137 来源：云博客

最近在该企业微信的功能，要做一个微信界面，要使用select来做下拉选择框

部分前台HTML代码：

在选择分享组的时候，要从后台查询数据来做选择项

 1 <form:form id="imgForm" modelAttribute="uploadImg" action="${oauthPath}/img/${agentKey}/submit" method="post"> 2 <input id="imgs" name="imgs" type="hidden" /> 3 <input id="deletes" name="deletes" type="hidden" /> 4 <form:hidden path="id"/>  5 <div class="weui_cells weui_cells_form" style="margin-top: 10px;"> 6 <div class="weui_cell"> 7 <div class="weui_cell_bd weui_cell_primary"> 8 <form:input path="title" htmlEscape="false" class="weui_input" placeholder="请输入标题" /> 9 </div>10 </div>11 </div>12 13 <div class="weui_cells_title">图片</div>14 <div id="imgDiv">15 <div id="add" class="imgBtn">16 <div>&nbsp;</div>17 </div>18 <div id="remove" class="imgBtn">19 <div>&nbsp;</div>20 </div>21 </div>22 23 <%-- <div class="weui_cells_title">分享</div>24 <div id="userSelectDiv" class="weui-row">25 <div class="weui-col-80">26 <form:textarea path="shareUserNames" readonly="readonly" htmlEscape="false" class="weui_textarea"/>27 <form:hidden path="shareUserIds" htmlEscape="false" class="required"/>28 </div>29 <div class="weui-col-20">30 <span id="openEnterpriseContact_invoke" >31 <i class="fa fa-user-plus"></i>32 </span>33 </div>34 </div> --%>35 36 <div class="weui_cells_title">分享组</div>37 <div id="userSelectDiv" class="weui_cells weui_cells_form">38 <!-- 第一种 -->39 <!-- <div class="weui_cell weui_cell_select weui-col-80">40  <div class="weui_cell_bd weui_cell_primary">41  <select class="weui_select" id="selectShareUserGroup">42  </select>43  </div>44  </div> -->45 <!-- 第二种 -->46 <div class="weui-cell">47 <div class="weui-cell_hd "></div>48 <div class="weui-cell_bd">49 <!-- <input class="weui-input" id="in" type="text" value=""> -->50 <input id="selectShareUserGroup" htmlEscape="false" class="weui_input" placeholder="点击选择分享组" />51 </div>52 </div>53 54 <!-- 分享组的用户 -->55 <div >56 <form:hidden path="shareUserIds" htmlEscape="false" class="required"/><br>57 <form:textarea path="shareUserNames" readonly="readonly" htmlEscape="false" class="weui_textarea" placeholder="显示分享组的用户"/>58 </div>59 </div>60 <div class="btnDiv" >61 <button class="weui_btn weui_btn_primary" id="save">保存</button>62 </div>63 </form:form>

相关JS代码

 1 <script type="text/javascript"> 2 $().ready(function(){ 3 //分享组用户不可编辑 4 document.getElementById("shareUserNames").readOnly=true; 5  6  7 //select选项 8 var selectItems = []; 9 10 //下拉框配置11 var selectConfig = {12 title: "分享组列表",13  items: selectItems,14 beforeClose: function(values, titles) {15 /* if(values.indexOf("6") !== -1) {16  $.toast("不能选睡觉", "cancel");17  return false;18  }19  return true; */20  },21 onChange: function(data) {//选中触发事件22 //调试：http://jqweui.com/dist/demos/select.html23 //console.log(this, d);24 /* for(var i in data.origins){25  alert(data.origins[i].checked);//选中的选项值26  alert(data.origins[i].value);//选中的选项值27  alert(data.origins[i].title);//选中的选项值28  alert(data.origins[i].description);//选中的选项值29  } */30  }, 31 onClose: function (data) {32 var userIds,userNames;33 34 var selectedOption = data.data;35 for(var i in selectedOption.origins){36 //console.log(selectedOption.origins[i].checked);//选中的选项值37 38 var userId = selectedOption.origins[i].value;39 var userName = selectedOption.origins[i].description;40 /* alert(userIds);//选中的选项值41  alert(selectedOption.origins[i].title);//选中的选项值42  alert(userNums);//选中的选项值 */43 44 userIds = userId;45 userNames = userName;46  }47 48 document.getElementById("shareUserNames").readOnly=false;49 //回填50 $("#shareUserNames").val(userNames);51 $("#shareUserIds").val(userIds);52 53 document.getElementById("shareUserNames").readOnly=true;54  changeBtn(); 55  }56  };57 58 59 //ajax远程加载初始化分享组下拉框选项 60  $.ajax({ 61 url: "${oauthPath}/img/${agentKey}/getUploadShareList", //后台webservice里的方法名称 62 type: "post", 63 dataType: "json", 64 contentType: "application/json", 65 traditional: true, 66 success: function (data) {67 var optionstring = ""; 68 for (var i in data) { 69 var jsonObj =data[i]; 70 //alert(jsonObj.name + "--" + jsonObj.userNums + "--" + jsonObj.userNames);71 //var title = jsonObj.userNames;72 //optionstring += "<option value=\"" + jsonObj.userNums + "\" title=\"" + jsonObj.userNames + "\">" + jsonObj.name + "</option>"; 73 //alert(optionstring);74 //alert(tempObj.title + tempObj.value);75 76 //创建json对象77 var option = {"title":jsonObj.name,"value":jsonObj.userNums,"description":jsonObj.userNames};78  selectItems.push(option);79  } 80 //alert(selectConfig.items.length);81 82 //初始化83 $("#selectShareUserGroup").select(selectConfig);84  }, 85 error: function (msg) { 86 alert("出错了！"); 87  } 88  });89  });90 91 /* $("#selectShareUserGroup").change(function(){92  //alert("dfgdf");93  //$("#selectShareUserGroup").select("open");94  }); */95 96 </script>