<title></title>
<script src="JS/jquery-1.7.1.js"></script>
<script type="text/javascript">
var RemoveDisabled = function () {
$('#btnAllRemove,#btnRemove').attr('disabled', 'disabled');
};
var RemoveEnabled = function () {
$('#btnAllRemove,#btnRemove').removeAttr('disabled');
};
var AddDisabled = function () {
$('#btnAllAdd,#btnAdd').attr('disabled', 'disabled');
};
var AddEnabled = function () {
$('#btnAllAdd,#btnAdd').removeAttr('disabled');
};
var RemoveSort = function () {
};
var AddSort = function () {
};
$(function () {
RemoveDisabled();
//var OtherSelected = $('#Other :selected').val();
$('#btnAllAdd').click(function () {
$('#Other option').each(function () {
//多次运行的代码
if ($(this).val() != "FC") {
$(this).appendTo($('#Owner'));
}
});
if ($('#Other option').length > 0)
$('#Other option').prependTo($('#Owner'));
AddDisabled();
RemoveEnabled();
});
$('#btnAdd').click(function () {
$('#Other :selected').each(function () {
if ($(this).val() == "FC") {
$(this).prependTo($('#Owner'));
$('#btnAllAdd').click();
return false;
}
else {
$('#Owner').append($('#Other :selected').remove());
}
});
if ($('#Other option').length == 0) {
AddDisabled();
} else {
RemoveEnabled();
}
//alert(.val())//.appendTo($('#Owner'));
});
$('#btnRemove').click(function () {
//不用each()实现太困难;
$('#Owner :selected').each(function () {
$(this).appendTo($('#Other'));
if ($('#Owner [value=FC]').length > 0) {
$('#Owner [value=FC]').prependTo($('#Other'));
}
});
if ($('#Owner option').length == 0) {
RemoveDisabled();
}
else {
AddEnabled();
}
});
$('#btnAllRemove').click(function () {
$('#Other').append($('#Owner option'));
AddEnabled();
RemoveDisabled();
});
//var Other=$('#Other option:selected').
});
</script>
</head>
<body>
<table>
<tr>
<td rowspan="4">
<select id="Other" multiple="multiple" style="height: 110px;">
<option value="FC">完全控制</option>
<option>修改</option>
<option>读取和执行</option>
<option>写入</option>
<option>读取</option>
</select>
</td>
<td>
<input type="button" value=">>" id="btnAllAdd" /><br />
</td>
<td rowspan="4">
<select id="Owner" multiple="multiple" style="height: 110px;">
</select></td>
</tr>
<tr>
<td>
<input type="button" value=">" id="btnAdd" /><br />
</td>
</tr>
<tr>
<td>
<input type="button" value="<" id="btnRemove" /><br />
</td>
<td></td>
</tr>
<tr>
<td>
<input type="button" value="<<" id="btnAllRemove" /></td>
</tr>
</table>
</body>