Ensure that the Javascript code is not duplicated in both the "parent" and "dispTable" - it should be removed from one of them.
Take a look at functions like GetSelectValues(CONTROL) and FillListValues(CONTROL).
Just a tip - you can write something similar without using the "buffer".
....
It's worth noting that I used "one".equals(name) instead of name.equals("one") as it also handles null cases. Please inform me if there is anything else you require that might have been overlooked.
Below is my functional code (I had to remove the 'one'.equals condition in my workspace due to lack of JSP support)
The parent file appears as follows:
<html>
<head>
<script language="javascript" type="text/javascript">
function showEmp(str){
$("#emp").load("dispTable.jsp");
}
</script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<script type="text/javascript">
function add()
{
return !($('#list1 option:selected').remove().appendTo('#list2') && ($('#list2:last-child').selected="selected"));
}
function remove()
{
return !$('#list2 option:selected').remove().appendTo('#list1');
}
</script>
<select name = "ratingsClient" style="width: 150px" id="ratingsClient" onchange="showEmp(this.value)">
<option value="aaa">aaa</option>
<option value="one">one</option>
<option value="two">two</option>
</select>
<br>
<div id="emp">
<table name="emp" >
</table>
</div>
</body>
</html>
And here is how the "dispTable" file is structured:
<table>
<tr>
<td>
<SELECT class="select" NAME="list1" id="list1" MULTIPLE SIZE=10 style="width:150px;">;
<option value="co_group">Compnay Description</option>
<option value="pe_rev_name">Contact Name</option>
<option value="co_tel_work">Telephone</option>
<option value="action_flag">Company Address</option>
<option value="co_group">Compnay Description</option>
<option value="pe_rev_name">Contact Name</option>
<option value="co_tel_work">Telephone</option>
<option value="pe_position">Contact Position</option>
<option value="pe_tel_work">Contact Telephone</option>
<option value="ref_no">ISBN</option>
</SELECT>
</td>
<td>
<INPUT TYPE="button" NAME="right" VALUE=">>" id="add" onclick="add()" style="width:40px;"><BR><BR>
<INPUT TYPE="button" NAME="left" VALUE="<<" id="remove" onclick="remove()" style="width:40px;"><BR><BR>
</td>
<td>
<SELECT NAME="list2" id="list2" MULTIPLE SIZE=10 style="width:150px;">
</SELECT>
</td>
</tr>
</table>
UPDATE: Expanding on the response to demonstrate how to send the "value" of the select box in the ajax request using the "GET" method instead of "LOAD"
function showEmp(str){
$.get("dispTable.jsp",{"count":str},function(result){$("#emp").html(result)})
}