In this example, you will learn how to create clone dropdown list with selected option when you will button click using jQuery. This is very simple trick; I have used clone method of jQuery.
Here’s an example
<!DOCTYPE html>
<html>
<head runat="server">
<title></title>
<style>
div
{
padding: 20px;
}
p
{
border-bottom: 1pxsolid#eaeaea;
width: 400px;
height: 25px;
margin: 0;
padding:2px5px;
}
p:hover
{
background-color: #fad791;
}
pspan
{
padding: 2px20px;
}
</style>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"
type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("#Button1").click(function(){
var div1 = $("#msg");
var OrgDropdown = $("#cb");
var dropdown = OrgDropdown.clone();
var p = $("span .abc").html(dropdown);
div1.html("");
for(i = 1; i <= 10; i++){
div1.append("<p><span>"+ i +"</span><span class='abc'>"+ i +"</span></p>");
}
$(".abc").html(dropdown);
$(".abc select").val($("#cb").val());
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<h1></h1>
<div>
Gender
<select id="cb">
<option>SELECT</option>
<option>Male</option>
<option>Female</option>
</select>
<input id="Button1 " type="button" value="button"/>
<div id="msg">
</div>
</div>
</form>
</body>
</html>
Output
Download
selected-value-DropDown-jQuery-Clone.aspx (1.98 kb)
See live demo