Dynamisk opfyldning af select, baseret på data fra database
Jeg har en .jsp side hvor jeg har tilføjet noget JavaScript. Den oprindelige JavaScript kode er noget jeg har fået. Jeg har så tilrettet den så den passertil mit problem. (er ikke serlig erfaren i JS).
Koden skal gøre at når man har valgt noget i 1. select, bestemmer dette valg hvad der skal vises i select nr 2, og det samme så med nr. 3.
Koden består af nogle array og data som skal lægges i henter jeg fra en MySQL database vha. af java.
Tabellen består af følgende kolonner:
1: ID (Primary key - fortløbende nummer)
2: location_id (Et rum har en null værdi. et skab i et rum har her den 'id' for det rum den står i, en hylde har her 'id' for skabet)
3: location_name (Navn fx kælder, skab1, hylde 34)
4: level (Der er forkellig level fx kælder 1 = level 0. skab34 i kælder 1 = level 1. hylde7 i skab34 = level 2)
Der vises kun data i select nr. 1, og når jeg vælger noget kommer der ikke nogen data frem i select nr. 2! Hvorfor?
Her kommer lige noget kode. først siden:
-----------------------------------------
<%@ page language="java" import="java.text.*" import="java.util.*" %>
<jsp:useBean id="container" class="ProjectPack.ContainerRegBean" scope="page"/>
<jsp:setProperty name="container" property="*"/>
<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var arrItems1 = new Array();
var arrItemsGrp1 = new Array();
var arrItemsLocID1 = new Array();
<% container.selectLocation();
for(int i=0; i<container.id_one.size(); i++)
{
String id = (String) container.id_one.elementAt(i);
String loc_id = (String) container.location_id_one.elementAt(i);
String location_name = (String) container.location_name_one.elementAt(i);
%>
arrItemsLocID1[<%= i %>] = "<%= loc_id %>";
arrItems1[<%= i %>] = "<%= location_name %>";
arrItemsGrp1[<%= i %>] = "<%= id %>";
<%
}
%>
var arrItems2 = new Array();
var arrItemsGrp2 = new Array();
var arrItemsLocID2 = new Array();
<% container.selectLocation();
for(int i=0; i<container.id_two.size(); i++)
{
String id = (String) container.id_two.elementAt(i);
String loc_id = (String) container.location_id_two.elementAt(i);
String location_name = (String) container.location_name_two.elementAt(i);
%>
arrItemsLocID2[<%= i %>] = "<%= loc_id %>";
arrItems2[<%= i %>] = "<%= location_name %>";
arrItemsGrp2[<%= i %>] = "<%= id %>";
<%
}
%>
function selectChange(control, controlToPopulate, ItemArray, GroupArray)
{
var myEle ;
var x ;
// Empty the second drop down box of any choices
for (var q=controlToPopulate.options.length;q>=0;q--) controlToPopulate.options[q]=null;
if (control.name == "firstChoice") {
// Empty the third drop down box of any choices
for (var q=locationChoices.thirdChoice.options.length;q>=0;q--) locationChoices.thirdChoice.options[q] = null;
}
// ADD Default Choice - in case there are no values
myEle = document.createElement("option") ;
myEle.value = 0 ;
myEle.text = "[SELECT]" ;
controlToPopulate.add(myEle);
// Now loop through the array of individual items
// Any containing the same child id are added to
// the second dropdown box
for ( x = 0 ; x < ItemArray.length ; x++ )
{
if(control.name == "firstChoice")
{
if ( GroupArray[x] == control.value )
{
myEle = document.createElement("option") ;
myEle.value = GroupArray[x];
myEle.text = ItemArray[x] ;
controlToPopulate.add(myEle) ;
}
}
if(control.name == "secondChoice")
{
if ( arrItemsLocID2[x] == control.value )
{
myEle = document.createElement("option") ;
myEle.value = GroupArray[x];
myEle.text = ItemArray[x] ;
controlToPopulate.add(myEle) ;
}
}
}
}
// End -->
</script>
<meta name="author" content="Dann Vestergaard & Claus Stie Kalles?e">
<LINK REL="stylesheet" TYPE="text/css" HREF="../Style.css">
<title>
Register Check
</title>
</head>
<body>
<form name="locationChoices" method="post">
<table>
<tr>
<td>Location ID:</td>
<SELECT id=firstChoice name=firstChoice onchange="selectChange(this, locationChoices.secondChoice, arrItems1, arrItemsGrp1);">
<td><select name="firstChoice">
<%
container.selectLocation();
for(int i=0; i<container.id_zero.size(); i++)
{
String loc_id = (String) container.id_zero.elementAt(i);
String location_name = (String) container.location_name_zero.elementAt(i);
%>
<option value="<%= loc_id %>"><%= location_name %></option>
<%
}
%>
</select>
</td>
<TD>
<SELECT id=secondChoice name=secondChoice onchange="selectChange(this, locationChoices.thirdChoice, arrItems2, arrItemsGrp2);">
</SELECT>
<SELECT id=thirdChoice name=thirdChoice>
</SELECT>
</TD>
</tr>
</table>
</form>
</body>
</html>
------------------------------------------
Her kommer siden når jeg trykker view source..
----------------------------------------
<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var arrItems1 = new Array();
var arrItemsGrp1 = new Array();
var arrItemsLocID1 = new Array();
arrItemsLocID1[0] = "1";
arrItems1[0] = "Skab 1";
arrItemsGrp1[0] = "4";
arrItemsLocID1[1] = "1";
arrItems1[1] = "Skab 2";
arrItemsGrp1[1] = "6";
arrItemsLocID1[2] = "2";
arrItems1[2] = "Køleskab 1";
arrItemsGrp1[2] = "8";
arrItemsLocID1[3] = "3";
arrItems1[3] = "Cabinet 34";
arrItemsGrp1[3] = "9";
var arrItems2 = new Array();
var arrItemsGrp2 = new Array();
var arrItemsLocID2 = new Array();
arrItemsLocID2[0] = "4";
arrItems2[0] = "Hylde 1";
arrItemsGrp2[0] = "5";
arrItemsLocID2[1] = "6";
arrItems2[1] = "Hylde 11";
arrItemsGrp2[1] = "7";
arrItemsLocID2[2] = "9";
arrItems2[2] = "Shelf 45";
arrItemsGrp2[2] = "10";
arrItemsLocID2[3] = "4";
arrItems2[3] = "En hylde mere";
arrItemsGrp2[3] = "11";
arrItemsLocID2[4] = "9";
arrItems2[4] = "Blå hylde";
arrItemsGrp2[4] = "12";
arrItemsLocID2[5] = "6";
arrItems2[5] = "Grøn hylde";
arrItemsGrp2[5] = "13";
function selectChange(control, controlToPopulate, ItemArray, GroupArray)
{
var myEle ;
var x ;
// Empty the second drop down box of any choices
for (var q=controlToPopulate.options.length;q>=0;q--) controlToPopulate.options[q]=null;
if (control.name == "firstChoice") {
// Empty the third drop down box of any choices
for (var q=locationChoices.thirdChoice.options.length;q>=0;q--) locationChoices.thirdChoice.options[q] = null;
}
// ADD Default Choice - in case there are no values
myEle = document.createElement("option") ;
myEle.value = 0 ;
myEle.text = "[SELECT]" ;
controlToPopulate.add(myEle);
// Now loop through the array of individual items
// Any containing the same child id are added to
// the second dropdown box
for ( x = 0 ; x < ItemArray.length ; x++ )
{
if(control.name == "firstChoice")
{
if ( GroupArray[x] == control.value )
{
myEle = document.createElement("option") ;
myEle.value = GroupArray[x];
myEle.text = ItemArray[x] ;
controlToPopulate.add(myEle) ;
}
}
if(control.name == "secondChoice")
{
if ( arrItemsLocID2[x] == control.value )
{
myEle = document.createElement("option") ;
myEle.value = GroupArray[x];
myEle.text = ItemArray[x] ;
controlToPopulate.add(myEle) ;
}
}
}
}
// End -->
</script>
<meta name="author" content="Dann Vestergaard & Claus Stie Kalles?e">
<LINK REL="stylesheet" TYPE="text/css" HREF="../Style.css">
<title>
Register Check
</title>
</head>
<body>
<form name="locationChoices" method="post">
<table>
<tr>
<td>Location ID:</td>
<SELECT id=firstChoice name=firstChoice onchange="selectChange(this, locationChoices.secondChoice, arrItems1, arrItemsGrp1);">
<td><select name="firstChoice">
<option value="1">kælder nr. 1</option>
<option value="2">Kælder nr 2</option>
<option value="3">Kælder nr 3</option>
</select>
</td>
<TD>
<SELECT id=secondChoice name=secondChoice onchange="selectChange(this, locationChoices.thirdChoice, arrItems2, arrItemsGrp2);">
</SELECT>
<SELECT id=thirdChoice name=thirdChoice>
</SELECT>
</TD>
</tr>
</table>
</form>
</body>
</html>
----------------------------------
Er der nogen som kan løse mit problem??!!??
