jquery multiSelect多选下拉操作

最新推荐文章于 2018-12-31 00:21:09 发布

streamcc

最新推荐文章于 2018-12-31 00:21:09 发布

阅读量2.6k

点赞数 1

分类专栏： jQuery_js 文章标签： jquery multiSelect 多选下拉框

本文链接：https://blog.csdn.net/streamcc/article/details/17512919

版权

jQuery_js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

jsp页面：

	<script src="../js/jquery-ui-1.9.2.custom/js/jquery-1.8.3.js"></script>
    <script src="../js/jquery.bgiframe.min.js" type="text/javascript"></script>
    <script src="../js/jquery.multiSelect.js" type="text/javascript"></script>
    <link href="../css/jquery.multiSelect.css" rel="stylesheet" type="text/css" />


 	<tr>
	     <td  class="td_01">用户角色名称
		  </td>
		  <td colspan="3">
		  <input type="hidden" name="user.userRoleName" id="updateTexts"/>
		  <input type="hidden" name="user.userRoleIds" id="updateVals"/>
		  <select id="updateRole" name="updateRole" multiple="multiple" style="width:80%;" >
        </select>
	     </td>
	  </tr>

js:

//点击修改之后操作
function alterinfo(userCode){
	$("#updateUserCode").val(userCode);
	 $.ajax( {
         url : "userManage!searchUserDetail.action",
         type : "post",
         dataType : "json",
         data:{"user.userCode":userCode},
         cache : false,
         success : function(data) {
        	var userInfo = eval("(" + data.userJson + ")");
        	var roleData= eval('(' + data.roleJson + ')');
          	var roleIds=userInfo.userRoleIds.split(",");
      
			var updateRole=$("#updateRole");
			 for(var k=0;k<roleData.length;k++){
				 var option="<option value="+roleData[k].roleId+">"+roleData[k].roleName+"</option>";
				 updateRole.append(option);
			 }

			 for(var i=0;i<roleIds.length;i++){
				$("#updateRole option[value=" + roleIds[i] + "]").attr("selected","selected");
			}

			$("#updateRole").multiSelect({ selectAll:false,oneOrMoreSelected: '*',noneSelected:'===请选择角色==='}, function(e,display, values) {
				$("#updateTexts").val(display);
				$("#updateVals").val(values);
			});
         }
	 });
	 //打开修改页面
	$( "#updateUserDialog" ).dialog( "open" );
}

struts.xml:

	<result name="userJson" type="json">
			 <param name="includeProperties">
                    roleJson.*,userJson.*
                </param> 
            </result>

action:

	public String searchUserDetail() {
		user = userService.searchUserByCode(user.getUserCode());
		JSONObject jso = JSONObject.fromObject(user);
		userJson = jso.toString();
		roleList = roleService.findRoleIdAndName();
		JSONArray jay = JSONArray.fromObject(roleList);
		roleJson = jay.toString();
		return "userJson";

	}

jquery.multiSelect源代码及demo