dynamic listboxes

likeopensource · Jan 2, 2003

I have at least 2 list boxes
Both are populated from the database
Depending on what is selected in one checkbox, the values in the second listbox change
I have been able to do this for Internet explorer, does someone know of a solution in Netscape.

I have done this using a mix of Javascript and ASP/JSP. So if you use some jsp/asp here that is fine.The page is not submitted when one changes the value in the first listbox

jemminger · Jan 2, 2003

likeopensource,

there shouldn't be any difference between browsers with this type of operation. show the code that you have so far.
=========================================================
if (!succeed) try();
-jeff

likeopensource · Jan 2, 2003

This is the code

q_hotel=" select event_name,event_id from m_event order by event_id ";
st1 = con.createStatement();
rs1 = st1.executeQuery(q_hotel);

while(rs1.next())
{
count_en++;
}
count_en<br>&quot

;
e_name = new String[count_en*2];

rs1.close();
st1.close();

q_event = " select event_id, accommodation_id, hotel_name from m_accommodation order by accommodation_id ";

stat = con.createStatement();
rs1 = stat.executeQuery(q_event);

while(rs1.next())
{
count_hn++;
}

h_name = new String[count_hn*3];

stat.close();
rs1.close();

<SCRIPT LANGUAGE="JavaScript">
var B1=new Array('<%=e_name.length%>')
var B2=new Array('<%=h_name.length%>')
<%
st1 = con.createStatement();
rs1 = st1.executeQuery(q_hotel);
i=0;
while(rs1.next())
{
Event_id= rs1.getString("event_id&quot

;
Event_name=rs1.getString("event_name&quot

;
Event_name=passBlank(Event_name);
Event_name=Event_name.trim();
e_name =Event_id;
e_name[i+1] =Event_name;

%>

B1['<%=i%>']='<%=Event_id%>'
B1['<%=i+1%>']='<%=Event_name%>'
<%

i=i+2;

}

i = 0;
rs1.close();
st1.close();
%>
<%
stat = con.createStatement();
rs1 = stat.executeQuery(q_event);
i=0;
while(rs1.next())
{
Eventid=rs1.getString("event_id"
Accomid=rs1.getString("accommodation_id"
Hotelname=rs1.getString("hotel_name"
Hotelname=passBlank(Hotelname);
Hotelname=Hotelname.trim();
h_name = Eventid;
h_name[i+1] =Accomid;
h_name[i+2] =Hotelname;
%>
B2['<%=i%>']='<%=Eventid%>'
B2['<%=i+1%>']='<%=Accomid%>'
B2['<%=i+2%>']='<%=Hotelname%>'

<%
i=i+3;
}

stat.close();
rs1.close();
i = 0;
%>

function get_hotel1(ev,ht)
{//1
var eid,k2=0;
eid=document.form1.ev.value;
document.form1.ht.disabled=false
for(var k1=0;k1<document.form1.ht.options.length;k1++) {
document.form1.ht.options[k1]=null;
}
for(var k1=0;k1<document.form1.ht.options.length;k1++) {
document.form1.ht.options[k1]=null;
}
document.form1.ht.options[0] = new Option("Select Hotel","&quot

for(var k1=0;k1<B2.length;k1++)
{
if(eid==B2[k1])
{
oNewOption = new Option();
oNewOption.text = B2[k1+2];
oNewOption.value =B2[k1+1];
document.form1.ht.add(oNewOption, k2+1);
k2++;
}

k1=k1+2;

}

if(document.form1.ht.options.length==1)
{
document.form1.ht.disabled=true
}
}

</script>

then inside the form do this(the form name is form1)

<td height="10"><div align="right"><font size="1" face="Verdana, Arial, Helvetica, sans-serif"><b>EVENT
NAME :</b></font></div></td>
<td valign="top">   
<select name="ev" onChange="get_hotel1(ev,ht);">

<option value="0">Select an Event</option>
<% for(i=0;i<count_en*2;i+=2) {%>
<option value="<%=e_name%>"> <%=e_name[i+1]%></option>
<%}
i=0;
%>
</select></td>
<td height="10"><div align="left"><font size="1" face="Verdana, Arial, Helvetica, sans-serif"><b>HOTEL
NAME:</b></font></div></td>
<td valign="top" height="10">
<select name="ht" disabled>
<option value="0">Select a hotel</option>
</select></td>
</tr>

Hope it helps you too, thanks

jemminger · Jan 3, 2003

typically the way this is done is:

1) remove all options in the second select, from last to first.
2) rebuild the options from first to last.

here's an example:
[tt]
<html>
<head>
<title>select changer</title>

<script language="javascript">
var arrOpts = [
[["one","1"],["two","2"],["three","3"]],
[["uno","1"],["dos","2"],["tres","3"]],
[["un","1"],["deux","2"],["trois","3"]]
];

function changeSel(sel1,sel2) {
// remove current options
for (x = sel2.options.length - 1; x >= 0; x--)
sel2.options[x] = null;
// replace with new options
var curr = sel1.selectedIndex;
for (x = 0; x < arrOpts[curr].length; x++)
sel2.options[x] = new Option(arrOpts[curr][x][0],arrOpts[curr][x][1]);
}
</script>

</head>

<body>
<form>

<select name="list1" onchange="changeSel(this,this.form.list2);">
<option value="">English</option>
<option value="">Spanish</option>
<option value="">French</option>
</select>

<select name="list2">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
</select>

</form>
</body>
</html>
[/tt]

========================================================================== =========================================================
if (!succeed) try();
-jeff

likeopensource · Jan 4, 2003

Jeff
Thanks
This is a new way of doing it, I will try to integrate it with my arrays

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!

dynamic listboxes

likeopensource

Programmer

jemminger

Programmer

likeopensource

Programmer

jemminger

Programmer

likeopensource

Programmer

Similar threads

Part and Inventory Search

Sponsor