微信开发 select选择框

Posted 2020-10-01 runmove

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了微信开发 select选择框相关的知识，希望对你有一定的参考价值。

最近在该企业微信的功能，要做一个微信界面，要使用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.html
23                           //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>