Use ListBox Item Scrollable

[Sajuddeen]

I guys i am shaju,
In my page i have two drop down list(state and region),two buttons at the bottom of the page(Next and Cancel),Depending on the state and region selected in the drop down list there will appear radio buttonlist, as now.The pbm is when i select some option in the drop down list Cancel button and Next goes down and unable to view that..So i am planning put there Listbox instead of Radio button list and should be scrollable so that Cancel button and Next button should not go down.Below is the current code the radio button list. Can some one help me out to make to List box and should be scrollable.Plz me out with issue....


JavaSript
========

function populateRegions()
{
//get selected state
var list = document.forms[0].State;
var stateSelected = list.options[list.selectedIndex].value;
var splitStateRegionAry = stringOfRegions.split("|*|");

//remove all existing elements in Region select and make way for the new ones
document.forms[0].Region.length = 1;

//only take out the regions that map to the selected state stateSelected variable
var regionIndex;
for ( regionIndex = 0; regionIndex < splitStateRegionAry.length; regionIndex++ )
{
if( splitStateRegionAry[regionIndex].indexOf( stateSelected + "|#|" ) > -1 && stateSelected.length > 0)
{
var splitStateCity = splitStateRegionAry[regionIndex].split("|#|");
//we've found a selected State region/city. Add this city to the Region select control as an option element.
var newElem = document.createElement("OPTION");
newElem.text = splitStateCity[1]; //this is the small two element array for this state city pair. We need the city which is the second element or index 1.
newElem.value = splitStateCity[1];
document.forms[0].Region.options.add(newElem);
}
}
}


function populateLocations()
{

var list = document.forms[0].Region;
var regionSelected = list.options[list.selectedIndex].value;
var splitLocationCityAry = stringOfLocations.split("|*|"); //each of these will be delimeted with a "|#|" Note that deviceIDs are delimited by "\~|".

var locationRadioList = "";
var i;

for( i = 0; i < splitLocationCityAry.length; i++ ) //move through all cities and locations within these cities.
{
//only allow the locations linked to the city selected above.
if( splitLocationCityAry[i].indexOf( regionSelected ) > -1 && regionSelected.length > 0 )
{

var aryOfLocations = splitLocationCityAry[i].split("|#|");

if(locationRadioList == "" ) // this first radio list should be selected by default
{
locationRadioList +=
"<table id='locTable' height='5%'>" +
"<tbody><tr>" +
"<td class='textbold'><input checked type='radio' name='rblist' value='" + splitLocationCityAry[i] + "'>" + aryOfLocations[1] +", " + aryOfLocations[2] + ", " + aryOfLocations[5] + "</input></td>" +

"<td class='textlink'><a href='" + aryOfLocations[7] + "' target='_BLANK'>map</a></td>" +
"</tr></tbody></table>";
}
else
{
locationRadioList +=
"<table id='locTable' height='5%'>" +
"<tbody><tr>" +
"<td class='textbold'><input type='radio' name='radio' value='" + splitLocationCityAry[i] + "'>" + aryOfLocations[1] +", " + aryOfLocations[2] + ", " + aryOfLocations[5] + "</input></td>" +

"<td class='textlink'><a href='" + aryOfLocations[7] + "' target='_BLANK'>map</a></td>" +
"</tr></tbody></table>";
}
}

}
document.all.locSpan.innerHTML = locationRadioList;



}





HTML Code
========



<TD align="left" width="10%"><SELECT class="text" id="State" onchange="populateRegions()" name="State">
<OPTION selected>-- <asp:label id="stateoption" runat="server" CssClass="textbold"></asp:label> --</OPTION>
</SELECT>
</TD>
<TD align="left"><SELECT class="text" id="Region" onchange="populateLocations()" name="Region">
<OPTION selected>-- <asp:label id="regionoption" runat="server" CssClass="textbold"></asp:label> --</OPTION>
</SELECT>
</TD>

[Shuja Ali]

Firsth thin g that you should do is wrap your code in code tags.

I am posting your code again so that it will be easier for others to distinguish between the code and the actual post

JavaScript Code function populateRegions()
{
//get selected state
var list = document.forms[0].State;
var stateSelected = list.options[list.selectedIndex].value;
var splitStateRegionAry = stringOfRegions.split("|*|");

//remove all existing elements in Region select and make way for the new ones
document.forms[0].Region.length = 1;

//only take out the regions that map to the selected state stateSelected variable
var regionIndex;
for ( regionIndex = 0; regionIndex < splitStateRegionAry.length; regionIndex++ )
{
if( splitStateRegionAry[regionIndex].indexOf( stateSelected + "|#|" ) > -1 && stateSelected.length > 0)
{
var splitStateCity = splitStateRegionAry[regionIndex].split("|#|");
//we've found a selected State region/city. Add this city to the Region select control as an option element.
var newElem = document.createElement("OPTION");
newElem.text = splitStateCity[1]; //this is the small two element array for this state city pair. We need the city which is the second element or index 1.
newElem.value = splitStateCity[1];
document.forms[0].Region.options.add(newElem);
}
}
}


function populateLocations()
{

var list = document.forms[0].Region;
var regionSelected = list.options[list.selectedIndex].value;
var splitLocationCityAry = stringOfLocations.split("|*|"); //each of these will be delimeted with a "|#|" Note that deviceIDs are delimited by "\~|".

var locationRadioList = "";
var i;

for( i = 0; i < splitLocationCityAry.length; i++ ) //move through all cities and locations within these cities.
{
//only allow the locations linked to the city selected above.
if( splitLocationCityAry[i].indexOf( regionSelected ) > -1 && regionSelected.length > 0 )
{

var aryOfLocations = splitLocationCityAry[i].split("|#|");

if(locationRadioList == "" ) // this first radio list should be selected by default
{
locationRadioList +=
"<table id='locTable' height='5%'>" +
"<tbody><tr>" +
"<td class='textbold'><input checked type='radio' name='rblist' value='" + splitLocationCityAry[i] + "'>" + aryOfLocations[1] +", " + aryOfLocations[2] + ", " + aryOfLocations[5] + "</input></td>" +

"<td class='textlink'><a href='" + aryOfLocations[7] + "' target='_BLANK'>map</a></td>" +
"</tr></tbody></table>";
}
else
{
locationRadioList +=
"<table id='locTable' height='5%'>" +
"<tbody><tr>" +
"<td class='textbold'><input type='radio' name='radio' value='" + splitLocationCityAry[i] + "'>" + aryOfLocations[1] +", " + aryOfLocations[2] + ", " + aryOfLocations[5] + "</input></td>" +

"<td class='textlink'><a href='" + aryOfLocations[7] + "' target='_BLANK'>map</a></td>" +
"</tr></tbody></table>";
}
}

}
document.all.locSpan.innerHTML = locationRadioList;



}
HTML Code <TD align="left" width="10%"><SELECT class="text" id="State" onchange="populateRegions()" name="State">
<OPTION selected>-- <asp:label id="stateoption" runat="server" CssClass="textbold"></asp:label> --</OPTION>
</SELECT>
</TD>
<TD align="left"><SELECT class="text" id="Region" onchange="populateLocations()" name="Region">
<OPTION selected>-- <asp:label id="regionoption" runat="server" CssClass="textbold"></asp:label> --</OPTION>
</SELECT>
</TD>