Multiple List/Menu (ComboBox)

See the commented lines for the issue

<script language = "JavaScript">
<!--
cat = new Array()
Issues = new Array()
cat [0] = new Array(1)
Issues [0] = new Array(1)
cat [0][0] = " "
Issues [0][0] = " "
cat [1] = new Array()
cat [1] [0] = "1,Beautiful"
Issues [1] = new Array()
Issues [1] [0] = "1,The wonders of the world"
cat [1] [1] = "2,Sensual"
//Issues [1] = new Array()
Issues [1] [1] = "2,Treat them like silk"
cat [1] [2] = "3,Loving"
//Issues [1] = new Array()
Issues [1] [2] = "3,Hold them and never let go"
cat [2] = new Array()
cat [2] [0] = "4,Guitars"
Issues [2] = new Array()
Issues [2] [0] = "4,Dean Custom"
cat [2] [1] = "5,Records"
//Issues [2] = new Array()
Issues [2] [1] = "5,KISS Alive"
cat [2] [2] = "6,Concerts"
//Issues [2] = new Array()
Issues [2] [2] = "6,KISS (All of them)"
cat [3] = new Array()
cat [3] [0] = "7,Laptop"
Issues [3] = new Array()
Issues [3] [0] = "7,Custom Built for Programming (ASP / Delphi)"
cat [3] [1] = "8,Desktop"
//Issues [3] = new Array()
Issues [3] [1] = "8,Custom Built for Graphics (Vue)"
 
 
//============================================
 
//Next, we create a function to fill the second drop down from 
//the array based on the item selected in the first drop down.
 
function FillList()
{
var num=document.ProgCat.ProgCats.selectedIndex 
var boxlength = 0
 
document.ProgCat.cat.selectedIndex = 0
for ( ctr=0;ctr<cat[num].length;ctr++)
 {
 boxlength++;
document.ProgCat.cat.options[ctr] = new Option(cat[num] [ctr].split(',')[1], cat[num][ctr].split(',')[0]);
 }
document.ProgCat.cat.length = boxlength;
document.ProgCat.cat.options.length = boxlength;
document.ProgCat.cat.focus() ;
}
function FillList1()
{
var num=document.ProgCat.cat.selectedIndex 
var boxlength = 0
 
document.ProgCat.Issues.selectedIndex = 0
for ( ctr=0;ctr<Issues[num].length;ctr++)
 {
 boxlength++;
document.ProgCat.Issues.options[ctr] = new Option(Issues[num] [ctr].split(',')[1], Issues[num][ctr].split(',')[0]);
 }
document.ProgCat.Issues.length = boxlength;
document.ProgCat.Issues.options.length = boxlength;
document.ProgCat.Issues.focus() ;
}
//-->
</script>
 
 
  <form name="ProgCat">
    <SELECT id="ProgCats" name="ProgCats" onChange = "JavaScript:FillList()">
      <OPTION selected value="">Choose SubCat</OPTION>
      
      <OPTION value="1">
      Women
      </OPTION>
      
      <OPTION value="2">
      Music
      </OPTION>
      
      <OPTION value="3">
      Computer
      </OPTION>
      
    </SELECT>&nbsp;&nbsp;&nbsp;
    <SELECT id="cats" name="cat" onChange = "JavaScript:FillList1()">
      <option value="">Choose Sub-Category</option>
    </SELECT>
       <SELECT id="Issues" name="Issues">
      <option value="">Issues</option>
    </SELECT></form>

Select allOpen in new window

this works better but not necessarily in the way you expect

<script language = "JavaScript">
<!--
cat = new Array()
cat [0] = new Array(1)
cat [0][0] = " "
cat [1] = new Array()
cat [1] [0] = "1,Beautiful"
cat [1] [1] = "2,Sensual"
cat [1] [2] = "3,Loving"
cat [2] = new Array()
cat [2] [0] = "4,Guitars"
cat [2] [1] = "5,Records"
cat [2] [2] = "6,Concerts"
cat [3] = new Array()
cat [3] [0] = "7,Laptop"
cat [3] [1] = "8,Desktop"
 
 
Issues = new Array()
Issues [0] = new Array(1)
Issues [0][0] = " "
Issues [1] = new Array(3)
Issues [1] [0] = "1,The wonders of the world"
Issues [1] [1] = "2,Treat them like silk"
Issues [1] [2] = "3,Hold them and never let go"
Issues [2] = new Array(3)
Issues [2] [0] = "4,Dean Custom"
Issues [2] [1] = "5,KISS Alive"
Issues [2] [2] = "6,KISS (All of them)"
Issues [3] = new Array(2)
Issues [3] [0] = "7,Custom Built for Programming (ASP / Delphi)"
Issues [3] [1] = "8,Custom Built for Graphics (Vue)"
 
//============================================
 
//Next, we create a function to fill the second drop down from 
//the array based on the item selected in the first drop down.
 
function FillList(sel) {
  var num=sel.selectedIndex; 
  var boxlength = 0;
  var cats = sel.form.cats; 
  cats.selectedIndex = 0
  for ( ctr=0;ctr<cat[num].length;ctr++) {
    boxlength++;
    cats.options[ctr] = new Option(cat[num] [ctr].split(',')[1], cat[num][ctr].split(',')[0]);
 }
  cats.options.length = boxlength;
  cats.focus() ;
}
function FillList1(sel) {
  var num=sel.selectedIndex 
  var boxlength = 0
  var issues = sel.form.Issues
  issues.selectedIndex = 0
  for ( ctr=0;ctr<Issues[num].length;ctr++) {
    boxlength++;
    alert(ctr+':'+num+':'+Issues[num].length)
    alert(ctr+':'+Issues[num].join('\n'))
    
    issues.options[ctr] = new Option(Issues[num] [ctr].split(',')[1], Issues[num][ctr].split(',')[0]);
  }
  issues.options.length = boxlength;
  issues.focus() ;
}
//-->
</script>
 
 
  <form name="ProgCat">
    <SELECT id="ProgCats" name="ProgCats" onChange = "FillList(this)">
      <OPTION selected value="">Choose SubCat</OPTION>
      
      <OPTION value="1">
      Women
      </OPTION>
      
      <OPTION value="2">
 
      Music
      </OPTION>
      
      <OPTION value="3">
      Computer
      </OPTION>
      
    </SELECT>&nbsp;&nbsp;&nbsp;
    <SELECT id="cats" name="cats" onChange = "FillList1(this)">
      <option value="">Choose Sub-Category</option>
    </SELECT>
 
       <SELECT id="Issues" name="Issues">
      <option value="">Issues</option>
    </SELECT></form>

Select allOpen in new window

Drat. Got interrupted..

Also you want to execute the onchange when you reload the page

this script does not reload the page.
This is all done in 1 instance.....
Or did you mean something else?

Carrzkiss

You were initializing the array again after setting the value. Please see line 11 and 14 in my post above. I have commented line 14.

humm..
Did either of you download the example?
Niether of your codes did nothing.
This is reading from a database. This is not hardcoded stuff.

sunithnair:
Your commented out stuff, does not do anything in my issue.

mplungjan:
I am trying to figure out what you are referring to when you say:
[this works better but not necessarily in the way you expect]
Because, it does not work at all, and gives me errors once I choose the 1st menu.

Carrzkiss

sunithnair:
My first comment was towards [mplungjan:]
Not towards you.

Carrzkiss

1. I tested the script in IE
2. You had multiple instances of the same array, resetting the length when you did
3. I did not download the zip, I just took the code from your site
4. the unexpected was "undefined" when I chose laptop
5. the reload is the behaviour if you return to the page or just reload the page, some browsers will be stuck at the first selection and not re-issue the FillList leaving you wil Woman in the first select and nothing in the second, then the user will have to select something else to re-select woman

PS: I have no way of running asp and no time to test such a thing

Thanks anyway mplungjan:
Would of been nice to of had you able to test "such a thing".

That is why I have it listed as: ASP and Javascript.
And I have the code available for Download.

-----------
#2: fixed
#4:  <-- that is what I am trying to fix.....???
#5.. I will have to work on that, as I cannot find no information on it.....?

-----------
Still, does not fix the issue with it not working on the last menu.....

See, it helps to actually test the full code out doesn't it?

Your Rock.
Thank you
Carrzkiss

You Rock [sunithnair]
Works like a charm. I see how you got it to work.
Now, when I need to add in another one down the line, I will
Really get to put your code through the grinder and learn it.

Have a good one
And keep on coding.

Carrzkiss

Hello [sunithnair]

Just ran into something, maybe you can assist in this.
Lets say that you only have information about "women" in the IssueResolve
And there is nothing for "Music (or) Computers"

When you run the scirpt. You select Computers or music
You will not get all the ProgCats for that Selection, you will only get "1" ProgCats for each
But, you will get all of them for "Women" as it has all it's IssueResolve listed.
Basically, if          Is Null
Is breaking....
Since there is no information under the IssueResolve for each other them.
It breaks the code.

Here is an example
http://ee.cffcs.com/Q_24254615/1.asp
And the code
http://ee.cffcs.com/Q_24254615/Q_24254615.zip

In the database, I duplicated the IssueResolve Table.
The old one is:   IssueResolves  (This has all the data in it like what you have from the earlier post)

Any idea's on this one will be great.
And if you feel that this deserves to have another question open.
Let me know and I will do that as well.

Have a good one.
Carrzkiss

Carrzkiss

I think you have uploaded the old code...

There you go mate. This should solve your problem.

<script language = "JavaScript">
<!--
cat = new Array()
Issues = new Array()
cat [0] = new Array(1)
Issues [0] = new Array(1)
<%
Set conn = Server.CreateObject("ADODB.Connection")
conn.ConnectionString = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & _
Server.MapPath ("Progs.mdb") & ";"
conn.Open
 
catcount = 0
sqlstring = "SELECT * from SubCat"
set rs1 = conn.execute(sqlstring)      
do while not(rs1.eof)
    catcount = catcount + 1
    response.write "cat ["& catcount &"] = new Array()" & vbcrlf
    sqlstring = "select * from ProgCat where SCID = " & rs1("SCID")
	 
    set rs2 = conn.execute(sqlstring)
    subcatcount = 0
    response.write "Issues ["& catcount &"] = new Array()" & vbcrlf
    do while not(rs2.eof)
        response.write "cat ["& catcount &"] ["& subcatcount &"] = """ & rs2("PCID") & "," & rs2("tname") & """" & vbcrlf
        sqlstring = "select * from IssueResolve where PCID = " & rs2("PCID")
        set rs3 = conn.execute(sqlstring)
        issuecount = 0
        do while not(rs3.eof)
            response.write "Issues ["& catcount &"] ["& subcatcount &"] = """ & rs3("ID") & "," & rs3("iname") & """" & vbcrlf
            rs3.movenext
            issuecount = issuecount+1
        loop
            subcatcount = subcatcount + 1
    rs2.movenext
    loop
rs1.movenext
loop
%>
 
//============================================
 
//Next, we create a function to fill the second drop down from 
//the array based on the item selected in the first drop down.
 
function FillList()
{
    var num=document.getElementById("ProgCats").selectedIndex;
    document.getElementById("cats").selectedIndex = 0;
    document.getElementById("Issues").selectedIndex = 0;
    for (var i=document.getElementById("cats").options.length;i>0;i--)
    {
        document.getElementById("cats").remove(i);
    }
    for (i=document.getElementById("Issues").options.length;i>0;i--)
    {
        document.getElementById("Issues").remove(i);
    }
    if(num>0)
    {
        for ( ctr=0;ctr<cat[num].length;ctr++)
        {
            var newOption = new Option(cat[num] [ctr].split(',')[1], cat[num][ctr].split(',')[0]);
            document.getElementById("cats").options.add(newOption);
        }
    }
    document.getElementById("cats").focus() ;
}
function FillList1()
{
    var num=document.getElementById("ProgCats").selectedIndex 
    document.getElementById("Issues").selectedIndex = 0
    for (var i=document.getElementById("Issues").options.length;i>0;i--)
    {
        document.getElementById("Issues").remove(i);
    }
    if(num>0)
    {
        for ( ctr=0;ctr<Issues[num].length;ctr++)
        {
            var newOption = new Option(Issues[num] [ctr].split(',')[1], Issues[num][ctr].split(',')[0]);
            document.getElementById("Issues").options.add(newOption);
        }
    }
   document.getElementById("Issues").focus() ;
}
//-->
</script>
<%
cat = Request.QueryString("cat")
sqlstring = "SELECT * from SubCat"
set rscat = conn.execute (sqlstring)
%>
 
  <form name="ProgCat">
    <SELECT id="ProgCats" name="ProgCats" onChange = "JavaScript:FillList()">
      <OPTION selected value="">Choose SubCat</OPTION>
      <%
do until rscat.eof
%>
      <OPTION value="<% = rscat("SCID")%>">
      <% = rscat("sname")%>
      </OPTION>
      <%
rscat.movenext
loop
'set rscat = nothing
%>
    </SELECT>&nbsp;&nbsp;&nbsp;
    <SELECT id="cats" name="cat" onChange = "JavaScript:FillList1()">
      <option value="">Choose Sub-Category</option>
    </SELECT>
       <SELECT id="Issues" name="Issues">
      <option value="">Issues</option>
    </SELECT></form>

Select allOpen in new window

Sorry i think this should work

<script language = "JavaScript">
<!--
cat = new Array()
Issues = new Array()
cat [0] = new Array(1)
Issues [0] = new Array(1)
<%
Set conn = Server.CreateObject("ADODB.Connection")
conn.ConnectionString = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & _
Server.MapPath ("Progs.mdb") & ";"
conn.Open
 
catcount = 0
sqlstring = "SELECT * from SubCat"
set rs1 = conn.execute(sqlstring)      
do while not(rs1.eof)
    catcount = catcount + 1
    response.write "cat ["& catcount &"] = new Array()" & vbcrlf
    sqlstring = "select * from ProgCat where SCID = " & rs1("SCID")
	 
    set rs2 = conn.execute(sqlstring)
    subcatcount = 0
    response.write "Issues ["& catcount &"] = new Array()" & vbcrlf
    issuecount = 0
    do while not(rs2.eof)
        response.write "cat ["& catcount &"] ["& subcatcount &"] = """ & rs2("PCID") & "," & rs2("tname") & """" & vbcrlf
        sqlstring = "select * from IssueResolve where PCID = " & rs2("PCID")
        set rs3 = conn.execute(sqlstring)
        do while not(rs3.eof)
            response.write "Issues ["& catcount &"] ["& issuecount &"] = """ & rs3("ID") & "," & rs3("iname") & """" & vbcrlf
            rs3.movenext
            issuecount = issuecount+1
        loop
            subcatcount = subcatcount + 1
    rs2.movenext
    loop
rs1.movenext
loop
%>
 
//============================================
 
//Next, we create a function to fill the second drop down from 
//the array based on the item selected in the first drop down.
 
function FillList()
{
    var num=document.getElementById("ProgCats").selectedIndex;
    document.getElementById("cats").selectedIndex = 0;
    document.getElementById("Issues").selectedIndex = 0;
    for (var i=document.getElementById("cats").options.length;i>0;i--)
    {
        document.getElementById("cats").remove(i);
    }
    for (i=document.getElementById("Issues").options.length;i>0;i--)
    {
        document.getElementById("Issues").remove(i);
    }
    if(num>0)
    {
        for ( ctr=0;ctr<cat[num].length;ctr++)
        {
            var newOption = new Option(cat[num] [ctr].split(',')[1], cat[num][ctr].split(',')[0]);
            document.getElementById("cats").options.add(newOption);
        }
    }
    document.getElementById("cats").focus() ;
}
function FillList1()
{
    var num=document.getElementById("ProgCats").selectedIndex 
    document.getElementById("Issues").selectedIndex = 0
    for (var i=document.getElementById("Issues").options.length;i>0;i--)
    {
        document.getElementById("Issues").remove(i);
    }
    if(num>0)
    {
        for ( ctr=0;ctr<Issues[num].length;ctr++)
        {
            var newOption = new Option(Issues[num] [ctr].split(',')[1], Issues[num][ctr].split(',')[0]);
            document.getElementById("Issues").options.add(newOption);
        }
    }
   document.getElementById("Issues").focus() ;
}
//-->
</script>
<%
cat = Request.QueryString("cat")
sqlstring = "SELECT * from SubCat"
set rscat = conn.execute (sqlstring)
%>
 
  <form name="ProgCat">
    <SELECT id="ProgCats" name="ProgCats" onChange = "JavaScript:FillList()">
      <OPTION selected value="">Choose SubCat</OPTION>
      <%
do until rscat.eof
%>
      <OPTION value="<% = rscat("SCID")%>">
      <% = rscat("sname")%>
      </OPTION>
      <%
rscat.movenext
loop
'set rscat = nothing
%>
    </SELECT>&nbsp;&nbsp;&nbsp;
    <SELECT id="cats" name="cat" onChange = "JavaScript:FillList1()">
      <option value="">Choose Sub-Category</option>
    </SELECT>
       <SELECT id="Issues" name="Issues">
      <option value="">Issues</option>
    </SELECT></form>

Select allOpen in new window

cool.
So my original idea came in handy in this issue.
>>>>>    issuecount = 0

Thank you once again for your help. You rock sunithnair

(Do you want me to open another question and post the question there for this code?
If so, let me know....)

Carrzkiss

still problems.
If you choose Women - and any item from the 2nd menu, the 3rd menu fills with all 3 values
Instead of the "1" Value that belongs with the selected 2nd Menu item.

If you would like for me to open a new Q just say the word.
So we can breath some new life into this aggrivation.

Carrzkiss

Hmm I need to look into that part then.. Better to open a new question and post the link here...

Thank you sun
http:Q_24260333.html

Have a good one.
Carrzkiss