Jquery 酷炫 用户 选择效果（js 实现带图片的 select 效果）

废话不多说，先看效果：

struts2 jsp 环境下。

代码实现：

hml部分：

<!-- 用于“保存”按钮提交时，提供数据 -->

<s:hidden id="userType" name="userType"></s:hidden>
<s:hidden id="associatedRoleIds" name="associatedRoleIds"></s:hidden>
<s:hidden id="associatedRoleNames" name="associatedRoleNames"></s:hidden>

<!--未关联用户 -->

<ul id="unassociatedRoleList" name="unassociatedRoleList" >
<s:iterator value="unassociatedRoleList" id="unauthRole" >
<s:if test="type=='group'">
<li id="${id}">
<img src="<%=path %>/styles/bkm/images/icon_08.gif" style="float:left">
<a id="a${id}" style="font-size:13px;"οnclick="unauthorizedSave('${id}')" >${roleName}</a>
</li>
</s:if>
<s:else>
<li id="${id}">
<img src="<%=path %>/styles/bkm/images/t_dm_user_16.gif" style="float:left">
<a id="a${id}" style="font-size:13px;"οnclick="unauthorizedSave('${id}')">${roleName}</a>
</li>
</s:else>
</s:iterator>
</ul>
………

<!--箭头按钮 开始-->
<div class="exchange_arrow">
<a href="javascript: void(0);" id="addRoleBtn" class="icon_arrow_green_r"></a>
<a href="javascript: void(0);" id="removeRoleBtn" class="icon_arrow_green_l"></a>
</div>
<!--箭头按钮 结束-->

…………

<!--已关联用户 -->
<ul id="associatedRoleList" name="associatedRoleList" >
<s:iterator value="associatedRoleList" id="authRole" >
<s:if test="type=='group'">
<li id="${id}">
<img src="<%=path %>/styles/bkm/images/icon_08.gif" style="float:left">
<a id="a${id}" style="font-size:13px;"οnclick="authorizedSave('${id}')">${roleName}</a>
</li>
</s:if>
<s:else>
<li id="${id}">
<img src="<%=path %>/styles/bkm/images/t_dm_user_16.gif" style="float:left">
<a id="a${id}" style="font-size:13px;"οnclick="authorizedSave('${id}')">${roleName}</a>
</li>
</s:else>
</s:iterator>
</ul>

…………

<button class="btn_white_84_27" type="button" οnclick="submitRole();">提交</button>

js部分：

前言，课外补充。

首先这里的缓存是两个数组：var tempUnauthorizedRoleIds = []; var tempAuthorizedRoleIds = [];

tempUnauthorizedRoleIds.push(id);用于往数组里面插入 tempUnauthorizedRoleIds.splice(same, 1); 用于删除数组里的 index 的值

不懂再看 w3school 里面的相关内容。

步骤一、先抓梗概，页面之间  传递数据，懂后，再来细化其他复杂功能：

//提交
function submitRole() {
var idStr = $("#associatedRoleIds").val();
var nameStr = $("#associatedRoleNames").val();
var type = $("#userType").val();
var organs = [];

organs[0] = {
id: idStr,
userName: nameStr,
userType: type
}
closeDialog(organs);
}

步骤二、点击 左边 和 右边 框中的 item 项

左边选项框

//未关联列表左边选中时
function unauthorizedSave(id){

var idStyle=document.getElementById(id);
var idBackGround = idStyle.style.background;
if(idBackGround == null || idBackGround == ""){
$("#"+id).css({"backgroundColor":"#ccc"});
//添加到缓存
tempUnauthorizedRoleIds.push(id);
}else{
$("#"+id).css({"backgroundColor":""});
//从缓存中移除
var same ;
for(var i = 0 ; i <tempUnauthorizedRoleIds.length; i++){
if (tempUnauthorizedRoleIds[i] == id) {
//记下相同的值
same = i;
}
}
//移除
tempUnauthorizedRoleIds.splice(same, 1);
}
}

右边选项框

//关联列表右边选中时
function authorizedSave(id){
var idStyle=document.getElementById(id);
var idBackGround = idStyle.style.background;
if(idBackGround == null || idBackGround == ""){
$("#"+id).css({"backgroundColor":"#ccc"});
//添加到缓存
tempAuthorizedRoleIds.push(id);
}else{
$("#"+id).css({"backgroundColor":""});
//从缓存中移除
var same ;
for(var i = 0 ; i <tempAuthorizedRoleIds.length; i++){
if (tempAuthorizedRoleIds[i] == id) {
//记下相同的值
same = i;
}
}
//移除
tempAuthorizedRoleIds.splice(same, 1);
}
}

步骤三、>>按钮 和 << 按钮功能

$(function(){
$("#removeRoleBtn").click(function() {
for(var i = 0; i<tempAuthorizedRoleIds.length; i++){
$("#"+tempAuthorizedRoleIds[i]).remove().appendTo($("#unassociatedRoleList"));
$("#"+tempAuthorizedRoleIds[i]).css({"backgroundColor":""});
$("#"+tempAuthorizedRoleIds[i]).find("a").attr("onclick","unauthorizedSave('"+tempAuthorizedRoleIds[i]+"')");
}
populateIds();

//需要清空缓存
tempAuthorizedRoleIds.length = 0;
tempAuthorizedRoleIds.length = 0;
});

$("#addRoleBtn").click(function(){ 
//关联用户 的列表长度
var authRoleLength = document.getElementById("associatedRoleList").getElementsByTagName("li").length;
for(var i = 0; i<tempUnauthorizedRoleIds.length; i++){
$("#"+tempUnauthorizedRoleIds[i]).remove().appendTo($("#associatedRoleList"));
$("#"+tempUnauthorizedRoleIds[i]).css({"backgroundColor":""});
$("#"+tempUnauthorizedRoleIds[i]).find("a").attr("onclick","authorizedSave('"+tempUnauthorizedRoleIds[i]+"')");
}
populateIds();

//需要清空缓存
tempAuthorizedRoleIds.length = 0;
tempUnauthorizedRoleIds.length = 0;
});
});

步骤四、populateIds();的作用是 

更新下面几个标签的值

<s:hidden id="userType" name="userType"></s:hidden>
<s:hidden id="associatedRoleIds" name="associatedRoleIds"></s:hidden>
<s:hidden id="associatedRoleNames" name="associatedRoleNames"></s:hidden>

继续populateIds();源码：

function populateIds() {
var ids = []; 
var names = [];
$("#associatedRoleList li").each(function() {
ids[ids.length] = $(this).attr("id");
names[names.length] = $(this).find("a").html();
});
$("#associatedRoleIds").val(ids.join(","));
$("#associatedRoleNames").val(names.join(","));

ids = [];
$("#unassociatedRoleList li").each(function() {
ids[ids.length] = $(this).attr("id");
});
$("#unassociatedRoleList").val(ids.join(","));
}

常言道：送人玫瑰，手留余香。好的东西需要分享，才感快乐。梳理思路也是一种思维提升的良好方法。

转载注明出处：  http://blog.csdn.net/xueshandugu/article/details/23461397