PDA

View Full Version : Multiple select on Listbox


yqin
11-04-2002, 02:42 PM
Here is my page and what I need to do:

The form has a checkbox and a listbox,
when the checkbox is checked, allow single select on the listBox only, when unchecked the checkbox, enable Multiple select on the listBox and select back all the previous selection, if any. the problem I am having is: the multiple select only works if the line of code "alert(arrSelect[j]);" in function "toggleFieldSelect(multi)" is uncommented.

Any idea? Thank you very much in advance.

P.S. I am only target to IE5+


attached is my code:

<html>
<head>
<script>
<!--

//switch the drop-down field list between
// multi/single select, and keep the selection
var arrSelect=new Array();

function toggleFieldSelect(multi)
{
var vfld=document.form1.field;
if(multi)
{
vfld.multiple=true;

for(var j=0;j<arrSelect.length;j++)
{
vfld.options[arrSelect[j]].selected=true;
//-------- with this alert message it will work ----------
alert(arrSelect[j]);
// --------- without it, it doesn't work ------------------
}

}
else
{
arrSelect=new Array();
for(var i=0;i<vfld.length;i++)
{
if(vfld.options[i].selected)
{
arrSelect[arrSelect.length]=i;
}
}
vfld.multiple=false;
}
}

-->
</script>
</head>
<body>
<form name="form1" id="form1">
<table cellspacing=0 cellpadding=5>
<tr>
<td class=text valign="top" align="left" colspan=2>
<input class=text type="checkbox" name="cutoff" value="true" onclick="toggleFieldSelect(!this.checked)">
</td>
</tr>
<tr>
<td valign="top" width="30%">
<SELECT class=text name="field" size=16 style="WIDTH:120" multiple>
<OPTION value="GROSS_AMT" selected>GROSS_AMT</OPTION>
<OPTION value="GST">GST</OPTION>
<OPTION value="PST">PST</OPTION>
</SELECT>

</td>

</tr>
</table>
</form>
</body>
</html>

glenngv
11-05-2002, 03:08 AM
put a little delay on selecting the previous items.

<html>
<head>
<script>
<!--

//switch the drop-down field list between
// multi/single select, and keep the selection
var arrSelect=new Array();

function selectPrevious(){
var vfld=document.form1.field;
for(var j=0;j<arrSelect.length;j++)
{
vfld.options[arrSelect[j]].selected=true;
}
}

function toggleFieldSelect(multi)
{
var vfld=document.form1.field;
if(multi)
{
vfld.multiple=true;

setTimeout("selectPrevious()",0)

}
else
{
arrSelect=new Array();
for(var i=0;i<vfld.length;i++)
{
if(vfld.options[i].selected)
{
arrSelect[arrSelect.length]=i;
}
}
vfld.multiple=false;
}
}

-->
</script>
</head>
<body>
<form name="form1" id="form1">
<table cellspacing=0 cellpadding=5>
<tr>
<td class=text valign="top" align="left" colspan=2>
<input class=text type="checkbox" name="cutoff" value="true" onclick="toggleFieldSelect(!this.checked)">
</td>
</tr>
<tr>
<td valign="top" width="30%">
<SELECT class=text name="field" size=16 style="WIDTH:120" multiple>
<OPTION value="GROSS_AMT" selected>GROSS_AMT</OPTION>
<OPTION value="GST">GST</OPTION>
<OPTION value="PST">PST</OPTION>
</SELECT>

</td>

</tr>
</table>
</form>
</body>
</html>

yqin
11-05-2002, 02:13 PM
Hi glenngv,

thanks a lot for the solution.:)