Sometimes we have a requirement to change the controls(from label to textbox/label to dropdown) dynamically (based upon user input/event like click of Edit button).

In that case what we generally do is create multiple set of controls, and based on the requirement we show & hide these controls. But that creates lot of performance and design issues.

Following example will explain better.

Suppose we have a requirement to display the age of a student in a label,e.g. 7 years or 7 months. while editing the age, it should become 2 different dropdowns.

<ul style="width: 20%; list-style: none; color: Black; font-family: Trebuchet MS, Calibri, Verdana; font-size: 13px;">

 <li id="liStudentAge">7 Years</li>

 <li id="liEdit" style="text-decoration: underline;list-style: none; cursor: pointer; float: left; width: 10%; color: Blue;" onclick="EditAge();">Edit</li>

 </ul>

jQuery Code (needs jQuery 1.3.2 or above):

<script type="text/javascript"> 

function EditAge() {

//get the age value

var lblStudAge = $('#liStudentAge').html();

//create age dropdown

var dropDownStudAge = '<select id="drpStudAge">';

for (var count = 0; count <= 100; count++) {

dropDownStudAge += '<option value="' + count + '"selected>' + count + '</option>';

}

dropDownStudAge += '</select>';

//create year dropdown

 $('#liStudentAge').html(dropDownStudAge + " " + dropDownYear);

//set the default text in both the dropdown

$('#drpStudAge').val(lblStudAge.split(' ')[0]);

$('#drpYear').val(lblStudAge.split(' ')[1]);

}

</script>