<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="JScript.js" type="text/javascript"></script>
<script src="JScript2.js" type="text/javascript"></script>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript">
$(document).ready
(
function () {
$('#btn3').click
(
function () {
$('#ddl option').remove()
$('#ddl').append("<option value=0>------Select------</option>")
$('#ddl1 option').each(function (i, j) {
$('#ddl').append("<option value='" + $(j).val() + "'>" + $(j).text() + "</option>")
});
}
)
$('#btn2').click(
function () {
$('#ddl option').remove()
$('#ddl').append("<option value=0>------Select------</option>")
$('#ddl1 option:selected').each(function (i, j) {
$('#ddl').append("<option value='" + $(j).val() + "'>" + $(j).text() + "</option>")
});
}
)
$('#btn1').click(
function () {
$('#ddl1 option').remove()
$('#ddl1').append("<option value=0>------Select------</option>")
$('#ddl option:selected').each(function (i, j) {
$('#ddl1').append("<option value='" + $(j).val() + "'>" + $(j).text() + "</option>")
})
}
)
$('#btn').click(
function () {
$('#ddl1 option').remove()
$('#ddl option').each(function (i, j) {
$('#ddl1').append("<option value='" + $(j).val() + "'>" + $(j).text() + "</option>")
}
)
}
)
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "WebService.asmx/x",
data: "",
dataType: "json",
async: false,
success: function (data) {
$('#ddl').append("<option value=0>------Select------</option>");
for (var i = 0; i < data.d.length; i++) {
$('#ddl').append("<option value=" + data.d[i].DID + ">" + data.d[i].DNAME + "</option>");
}
}
});
}
)
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table align="center">
<tr>
<td>
<select id="ddl" name="ddl" size="2" multiple="multiple">
</select>
</td>
<td>
<input type="button" id="btn" name="btn" value=">>" style="width: 30px" /><br />
<input type="button" id="btn1" name="btn1" value=">" style="width: 30px" /><br />
<input type="button" id="btn2" name="btn2" value="<" style="width: 30px" /><br />
<input type="button" id="btn3" name="btn3" value="<<" style="width: 30px" />
</td>
<td>
<select id="ddl1" name="ddl1" multiple="multiple" size="2">
</select>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
The page looks like
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="JScript.js" type="text/javascript"></script>
<script src="JScript2.js" type="text/javascript"></script>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript">
$(document).ready
(
function () {
$('#btn3').click
(
function () {
$('#ddl option').remove()
$('#ddl').append("<option value=0>------Select------</option>")
$('#ddl1 option').each(function (i, j) {
$('#ddl').append("<option value='" + $(j).val() + "'>" + $(j).text() + "</option>")
});
}
)
$('#btn2').click(
function () {
$('#ddl option').remove()
$('#ddl').append("<option value=0>------Select------</option>")
$('#ddl1 option:selected').each(function (i, j) {
$('#ddl').append("<option value='" + $(j).val() + "'>" + $(j).text() + "</option>")
});
}
)
$('#btn1').click(
function () {
$('#ddl1 option').remove()
$('#ddl1').append("<option value=0>------Select------</option>")
$('#ddl option:selected').each(function (i, j) {
$('#ddl1').append("<option value='" + $(j).val() + "'>" + $(j).text() + "</option>")
})
}
)
$('#btn').click(
function () {
$('#ddl1 option').remove()
$('#ddl option').each(function (i, j) {
$('#ddl1').append("<option value='" + $(j).val() + "'>" + $(j).text() + "</option>")
}
)
}
)
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "WebService.asmx/x",
data: "",
dataType: "json",
async: false,
success: function (data) {
$('#ddl').append("<option value=0>------Select------</option>");
for (var i = 0; i < data.d.length; i++) {
$('#ddl').append("<option value=" + data.d[i].DID + ">" + data.d[i].DNAME + "</option>");
}
}
});
}
)
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table align="center">
<tr>
<td>
<select id="ddl" name="ddl" size="2" multiple="multiple">
</select>
</td>
<td>
<input type="button" id="btn" name="btn" value=">>" style="width: 30px" /><br />
<input type="button" id="btn1" name="btn1" value=">" style="width: 30px" /><br />
<input type="button" id="btn2" name="btn2" value="<" style="width: 30px" /><br />
<input type="button" id="btn3" name="btn3" value="<<" style="width: 30px" />
</td>
<td>
<select id="ddl1" name="ddl1" multiple="multiple" size="2">
</select>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
The page looks like
No comments:
Post a Comment