1.) I need to have this kind of behavior and period.
2.) I need to know what was the option that was clicked last because i
need to check if this option is already selected..if it is already
selected then i have to deselect it..I don't need to do this for every
other option except for the one that was selected last.
Get it?
Are you saying that if the user clicks on a currently selected option, that
option should be deselected, when normally nothing would happen?
Unfortunately, I.E does not support onclick for individual select options,
without which I can't see how to implement that behaviour.
Of course under Mozilla or Opera it's a doddle. Try this example, which
demonstrates two alternative select behaviours:
<HTML>
<BODY>
Normal behaviour preserved, except click toggles current option.
<FORM name='f1'>
<SELECT multiple name='s1'>
<OPTION value='red'>red
<OPTION value='green'>green
<OPTION value='blue'>blue
<OPTION value='black'>black
</SELECT>
</FORM>
<BR><BR>
Multiple Select using mouse only; shift/ctrl do not override.
<FORM name='f2'>
<SELECT multiple name='s1'>
<OPTION value='red'>red
<OPTION value='green'>green
<OPTION value='blue'>blue
<OPTION value='black'>black
</SELECT>
</FORM>
<SCRIPT type='text/javascript'>
function monitorSelect( objRef, sel, multi )
{
objRef=this;
this.sel=sel;
this.multi=multi;
this.optStates=[];
for(var i=0; i<this.sel.options.length; i++)
this.optStates
=this.sel.options.selected;
this.sel.options.onclick=function(){ objRef.recordStates(this) };
}
}
monitorSelect.prototype.recordStates=function(opt)
{
for(var i=0; i<this.sel.options.length; i++)
{
if(opt==this.sel.options)
if(this.optStates)
this.sel.options.selected=false;
}
else
if(this.multi)
this.sel.options.selected=this.optStates;
this.optStates=this.sel.options.selected;
}
}
var selObj1=new monitorSelect(selObj1, document.forms.f1.s1, false);
var selObj2=new monitorSelect(selObj2, document.forms.f2.s1, true);
</SCRIPT>
</BODY>