Problem with Select Boxes

Hi All,
1. The user shouldnot select more than 2 selections.
2. The selected items should come on the top of the box.
3. It should seem as selected.

Plz help...
This is the sample code


<select name="farea"size="5" multiple class="textboxes1" >
<option selected label="Mumbai" value="Mumbai">Mumbai</option>
<option label="Delhi" value="Delhi">Delhi</option>
<option label="Trivandrum" value="Gurgaon">Gurgaon</option>
<option label="Bangalore" value="Bangalore">Bangalore</option>
<option label="Trivandrum" value="Hyderabad">Hyderabad</option>
<option label="Trivandrum" value="Trivandrum">Trivandrum</option>
<option label="Trivandrum" value="Noida">Noida</option>
</select>

use this function for focus where ever you want;

function x( listCtl )
{
var oCtlList=(typeof listCtl ="object" )?listCtl :document.getElementById(listCtl );
for(i=0;i<oCtlList;i++)
{
if(oCtlList.options[i].seleted==true)
{
oCtlList.options[i].focus();
break;
}
}
}

HTML
<input type="hidden" id ="hidCounter" value=0>

use this function for user to restrict up to onl;y 2 selections
onclick of list control and keep this hidden field in your page

function y(e , hid )//e is the object of list contril
{
var counter=0;
for(i=0;i<e.options.length;i++)
{
if(document.getelementById(hid).value!="2")
{
if(e.options[i].selected==true)
{
counter++;
}
document.getelementById(hid).value=counter;
}
else
{
alert("not allowed")
}
}