This Way
HTML
<form id="form1" runat="server">
<div>
<asp:DropDownList ID="ddlFruits" runat="server" onchange="PassSelected(this);">
<asp:ListItem Text="Apple" />
<asp:ListItem Text="Mango" />
<asp:ListItem Text="Banana" />
<asp:ListItem Text="Orange" />
<asp:ListItem Text="Pineapple" />
<asp:ListItem Text="Guava" />
</asp:DropDownList>
<hr />
<asp:DropDownList ID="ddlSelectedFruits" runat="server">
</asp:DropDownList>
</div>
</form>
Script
<script type="text/javascript">
function PassSelected(opt) {
var seleted = document.getElementById("<%=ddlSelectedFruits.ClientID %>");
var count = seleted.getElementsByTagName("option");
if (count.length == 0) {
var option = document.createElement("option");
option.text = opt.value;
option.value = opt.value;
document.getElementById("ddlSelectedFruits").options.add(option);
}
else {
var present = false;
for (var i = 0; i < count.length; i++) {
if (seleted[i].value == opt.value) {
alert('Already added');
present = false;
break;
}
present = true;
}
if (present) {
var option = document.createElement("option");
option.text = opt.value;
option.value = opt.value;
document.getElementById("<%=ddlSelectedFruits.ClientID %>").options.add(option);
}
}
}
</script>
With Demo
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
function PassSelected(opt) {
var seleted = document.getElementById("sSelectedFruits");
var count = seleted.getElementsByTagName("option");
if (count.length == 0) {
var option = document.createElement("option");
option.text = opt.value;
option.value = opt.value;
document.getElementById("sSelectedFruits").options.add(option);
}
else {
var present = false;
for (var i = 0; i < count.length; i++) {
if (seleted[i].value == opt.value) {
alert('Already added');
present = false;
break;
}
present = true;
}
if (present) {
var option = document.createElement("option");
option.text = opt.value;
option.value = opt.value;
document.getElementById("sSelectedFruits").options.add(option);
}
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<select id="sFruits" onchange="PassSelected(this)">
<option value="Apple">Apple</option>
<option value="Mango">Mango</option>
<option value="Pineapple">Pineapple</option>
<option value="Guava">Guava</option>
<option value="Orange">Orange</option>
</select>
<hr />
<select id="sSelectedFruits">
</select>
</div>
</form>
</body>
</html>
Demo
