jQuery制作select双向选择列表_H5之家 - 中国HTML5教程资源分享第一站

本文为大家介绍如何使用jQuery制作select双向选择列表，先看效果图：

jQuery制作select双向选择列表

完整代码如下所示：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE>

New Document

</TITLE>

</script>

<style>

.sel{width:150px;height:200px;} .btn{width:50px;font-weight:bold;font-size:14px;

}

</style>

</HEAD>

<BODY>

<table>

<tr>

<td>

aaaaaaaaaaa

</option>

bbbbbbbbbbb

</option>

ccccccccccc

</option>

ddddddddddd

</option>

eeeeeeeeeee

</option>

</select>

</td>

<td>

<p>

</button>

</p>

<p>

</button>

</p>

<p>

<</button>

</p>

<p>

<<</button>

</p>

</td>

<td>

fffffffffff

</option>

</select>

</td>

</tr>

</table>

</BODY>

$(function() {

$("#sel_left,#sel_right").bind("change", checkBtn);

$("#btn_1,#btn_2,#btn_3,#btn_4").bind("click", clickBtn);

checkBtn();

});

function checkBtn() {

jQuery("#sel_left>option").length > 0 ? jQuery("#btn_1").removeAttr("disabled") : jQuery("#btn_1").attr("disabled", "disabled");

jQuery("#sel_left option:selected").length > 0 ? jQuery("#btn_2").removeAttr("disabled") : jQuery("#btn_2").attr("disabled", "disabled");

jQuery("#sel_right option:selected").length > 0 ? jQuery("#btn_3").removeAttr("disabled") : jQuery("#btn_3").attr("disabled", "disabled");

jQuery("#sel_right>option").length > 0 ? jQuery("#btn_4").removeAttr("disabled") : jQuery("#btn_4").attr("disabled", "disabled");

}

function clickBtn(e) {

if ("btn_1" == e.target.id) {

jQuery("#sel_left>option").appendTo("#sel_right");

} else if ("btn_2" == e.target.id) {

jQuery("#sel_left option:selected").appendTo("#sel_right");

} else if ("btn_3" == e.target.id) {

jQuery("#sel_right option:selected").appendTo("#sel_left");

} else if ("btn_4" == e.target.id) {

jQuery("#sel_right>option").appendTo("#sel_left");

}

checkBtn();

}

</script>

</HTML>

分享按钮