Highlight option in a multiple list box

silud · Mar 11, 2003

I am using PHP to query a database and populate a multiple SELECT box. It also highlights the selected options. Since the list box is only two lines high, and there are more than two options, sometimes the selected items do not show in the list box. If you scroll down, they are highlighted as you would expect. How do you "pre-scroll" to the selected options, to ensure that the highlighted options are visible on page load?

I hope this makes sense!

BDC2 · Mar 11, 2003

You would have to do this client side...

<HTML>
<HEAD>
<SCRIPT language="JavaScript1.2">
function showSelected() {
document.myForm.myList.focus();
select_option(document.myForm.myList, 5);
}
function select_option( selectbox, index )
{
for( var i = 0; i < selectbox.options.length; i++ )
{
if( i == index )
selectbox.options.selected = true;
else
selectbox.options.selected = false;
}
}
</SCRIPT>

</HEAD>
<BODY onLoad="showSelected();">
<FORM name="myForm">
<SELECT name="myList" MULTIPLE>
<OPTION value="foobar">foobar</OPTION>
<OPTION value="foobar1">foobar1</OPTION>
<OPTION value="foobar2">foobar2</OPTION>
<OPTION value="foobar3">foobar3</OPTION>
<OPTION value="foobar4">foobar4</OPTION>
<OPTION value="foobar5">foobar5</OPTION>
<OPTION value="foobar6">foobar6</OPTION>
</SELECT>
</FORM>
</BODY>
</HTML> BDC.

silud · Mar 11, 2003

OK, thanks. I thought it might be something like this. Strange that the selected items aren't visible in the listbox at the start, though!

The code doesn't do exactly what I need, but it's easy enough to modify. Thanks for the quick response!

Si

silud · Mar 11, 2003

Modified it. Here it is, in case anyone's interested:

function select_option (selectbox) {
// Clears selected items in listbox, and re-selects them
// This displays items in the visible part of the list!
var selection = new Array (selectbox.options.length);
for (var i=0; i<selectbox.options.length; i++) {
if (selectbox.options.selected) selection = true; else selection = false;
selectbox.options.selected = false;
}
for (var i=0; i<selectbox.options.length; i++) {
if (selection) selectbox.options.selected = true;
}
}

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Highlight option in a multiple list box

silud

MIS

BDC2

Programmer

silud

MIS

silud

MIS

Similar threads

Part and Inventory Search

Sponsor