<%@
page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%><!
DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><
html><
head><
meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><
script src="js/jquery.js"></script><
script type="text/javascript" src="js/jquery.appendToList.js"></script><
script type="text/javascript" src="js/editableControlList.doucument.ready.js"></
script><
title>Editable Control List</title></
head><
body bgcolor="#CCCCCC"><
form name="f1" ><
div id="list"><
table><
tr><
td><
table><
tr> <td> <span id="title" >Hobbies </span><img alt="Remove" src="Images/minus.png" align="right" id="remove"></img> </td> </tr><
tr><td><select size="10" id="control_list" title="nazeer"></select></td></tr><
tr><td><input type="text" id="addelementvalue" /><img alt="Add" src="Images/plus.png" id="add"/></td></tr><
tr><td>Allow unique<input type="radio" name="isUnique" value="yes" checked="checked" >yes<input type="radio" name="isUnique" value="no">no </td></tr><
tr><td colspan="1"><span id="info" style="font-style: italic;">allows only unique values</span></td></tr></
table></
td><
td></
td></
tr></
table></
div></
form></
body></
html> the above code is html code and below code are js file.editableControlList.doucument.ready.js$(document).ready(
function* when you click on add button appendToList method will call
*/
$(
'#add').click(function() { /** calling appendToList method
* value is a parameter represents text id
* allowUniqvalues is a parameter represents radio button value(whether to allow unique values or not)
* controllist is a parameter represents control list id
*/
$(
"#list").appendToList({value: '#addelementvalue',controllist: '#control_list',allowUniqvalues:$("input[name=isUnique]:checked").val()}); return false;});
(function
$.fn.appendToList =
function (params) { this .each( function () { var $list=$(params.controllist); var ctrlListLength=$(params.controllist+ ' option' ).length; var $value=$.trim($(params.value).val()); var isThere=$list.find( 'option:contains(' +$value+ ')' ).val()==$value? true : false ; var isUndefined=$list.find( 'option:contains(' +$value+ ')' ).val()=== undefined ? true : false ; var isUniq=params.allowUniqvalues=="yes"? true : false ;if($value==errors.noerror||$value==null)
{
alert("null values are not allowed");
return false;
}
else if ($.trim($value)==""||$.trim($value)==null)
{
alert("Only spaces not allowed");
return false;
}else
{
if (!isUniq){
$list.append(
"<option value='" +$value+ "' alt='" +$value+ "' title='" +$value+ "'>" +$value+ "</option>" );document.getElementById(params.value.substring(1)).value="";
}
else if (isThere){
alert("duplicate not allowed");
return false ;}
else{
$list.append(
"<option value='" +$value+ "' alt='" +$value+ "' title='" +$value+ "'>" +$value+ "</option>" );document.getElementById(params.value.substring(1)).value="";
}
}
});
return this ;};
jquery 1.4.4 version