<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="Scripts/jquery.json-2.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var hidSeleted = $("#<%= hidSeleted.ClientID %>").val(); //hidSeleted用于回传时，保存选择的值
if (hidSeleted.length > 0) {
var selectedData = $.evalJSON(hidSeleted);
$.each(selectedData, function (i) {
$("#selectedCollector").append("<option value='" + selectedData[i].selectValue + "'>" + selectedData[i].selectText + "</option>");
})
}
//双击
$("#selectTarger").dblclick(function () {
var checkText = $("#selectTarger").find("option:selected").text(); //获取Select选择的Text
var checkValue = $("#selectTarger").find("option:selected").val(); //获取Select选择的Value
AddItem(checkValue, checkText);
})
})
function selectModel() {
this.selectText;
this.selectValue;
}
function removeItem() {
var selected = $("#selectedCollector").val();
if (selected != null) {
for (var i = 0; i < selected.length; i++) {
$("#selectedCollector option[value='" + selected[i] + "']").remove();//移除选择款里的值
}
SaveSelected();
}
else {
alert('没有选择项');
}
}
function CheckItemIsSelected(value) {
var isExist = false;
$("#selectedCollector").children("option").each(function () {
if ($(this).val() == value) {
isExist = true;
return false;
}
})
return isExist;
}
function AddItem(value, text) {
var isExist = CheckItemIsSelected(value);
if(isExist)
{
alert('已经选择此项，不能重复选择');
return;
}
var selected = new selectModel();
selected.selectText = text;
selected.selectValue = value;
$("#selectedCollector").append("<option value='" + value + "'>" + text + "</option>");
SaveSelected();
}
function SaveSelected() {
var selectedArray = GetSelected();
var encoded = $.toJSON(selectedArray);
$("#<%= hidSeleted.ClientID %>").val(encoded);
}
function GetSelected() {
var selectedArray = new Array();
$("#selectedCollector").children("option").each(function () {
var selected = new selectModel();
selected.selectText = $(this).text();
selected.selectValue = $(this).val();
selectedArray.push(selected);
})
return selectedArray;
}
</script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<table width="99%">
<tr>
<td align="left" width="40%" valign="top">
<select id="selectTarger" multiple="multiple" size="20" style=" 320px; background: none repeat scroll 0 0 #FFFFFF;
line-height: normal; margin: 0; padding: 0;">
<option value="1">asp.net</option>
<option value="2">java</option>
</select>
</td>
<td align="center" width="10%" valign="top">
<br>
<br>
<br>
<input name="removeCollector" class="button" type="button" value="选择" onclick="AddItem()" /><br>
<br>
<br>
<input name="removeCollector" class="button" type="button" value="移除选择" onclick="removeItem()" /><br>
<br>
<br>
</td>
<td>
</td>
<td align="left" valign="top">
<select id="selectedCollector" multiple="multiple" size="20" style=" 320px;
background: none repeat scroll 0 0 #FFFFFF; line-height: normal; margin: 0; padding: 0;">
</select>
</td>
</tr>
</table>
<input id="hidSeleted" runat="server" type="hidden" />
<asp:Button ID="btnSave" runat="server" Text="保存" onclick="btnSave_Click" />
</form>
</body>
</html>