Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #12468 > unrolled thread

How can I create multi level drop down box

Back to article view | Back to comp.lang.javascript

Contents

  How can I create multi level drop down box hon123456 <peterhon321@yahoo.com.hk> - 2012-03-07 01:25 -0800
    Re: How can I create multi level drop down box "Tom de Neef" <tdeneef@qolor.nl> - 2012-03-07 12:44 +0100
      Re: How can I create multi level drop down box hon123456 <peterhon321@yahoo.com.hk> - 2012-03-07 04:46 -0800
    Re: How can I create multi level drop down box Scott Sauyet <scott.sauyet@gmail.com> - 2012-03-07 04:57 -0800
    Re: How can I create multi level drop down box SAM <stephanemoriaux.NoAdmin@wanadoo.fr.invalid> - 2012-03-07 14:15 +0100

#12468 — How can I create multi level drop down box

Dear all,
      I want to create 4 level drop downlist box in my page. When user
select a value in drop down list box, then a second drop down list box
will be shown out with content populated from database based on the
value of first drop down list box, and when user select a value in
second drop down box, then the third drop down list box will be shown
from database based on the value of second drop down list box,then
same to the fourth drop down list box. I will hardcode the first
selection box as follows:
<selection name="Company:>
<option value="company1">company1</option>
<option value="company2">company1</option>
<option value="company3">company1</option>
</selection>

At the begining, there is only one drop down list box in the webpage,
after user select the company, then the second will be shown and then
third..

How can I do that? Thanks.

[toc] | [next] | [standalone]

#12470

"hon123456" <peterhon321@yahoo.com.hk> schreef in bericht 
news:6ac0052d-44e8-4abe-8f56-18361c3c69aa@9g2000pbn.googlegroups.com...
> Dear all,
>      I want to create 4 level drop downlist box in my page. When user
> select a value in drop down list box, then a second drop down list box
> will be shown out with content populated from database based on the
> value of first drop down list box, and when user select a value in
> second drop down box, then the third drop down list box will be shown
> from database based on the value of second drop down list box,then
> same to the fourth drop down list box. I will hardcode the first
> selection box as follows:
> <selection name="Company:>
> <option value="company1">company1</option>
> <option value="company2">company1</option>
> <option value="company3">company1</option>
> </selection>
>
> At the begining, there is only one drop down list box in the webpage,
> after user select the company, then the second will be shown and then
> third..

Will the user need to click in the first three lists or is a mouse-over 
sufficient to show the next level?
In JavaScript: create a table element, populate it with tr and td elements 
to which you add a text element with data from the database. Position the 
table (absolute) next to the cell that called it up. Attach to each element 
the appropriate event (click or mouseover). Etc. I guess there will be 
libraries to do the bulk of the work for you.
Tom

[toc] | [prev] | [next] | [standalone]

#12473

Tom de Neef於 2012年3月7日星期三UTC+8下午7時44分07秒寫道：
> "hon123456" 
>  schreef in bericht 
> news:6ac0052d-44e8-4abe-8f56-18361c3c69aa@9g2000pbn.googlegroups.com...
> > Dear all,
> >      I want to create 4 level drop downlist box in my page. When user
> > select a value in drop down list box, then a second drop down list box
> > will be shown out with content populated from database based on the
> > value of first drop down list box, and when user select a value in
> > second drop down box, then the third drop down list box will be shown
> > from database based on the value of second drop down list box,then
> > same to the fourth drop down list box. I will hardcode the first
> > selection box as follows:
> > <selection name="Company:>
> > <option value="company1">company1</option>
> > <option value="company2">company1</option>
> > <option value="company3">company1</option>
> > </selection>
> >
> > At the begining, there is only one drop down list box in the webpage,
> > after user select the company, then the second will be shown and then
> > third..
> 
> Will the user need to click in the first three lists or is a mouse-over 
> sufficient to show the next level?
> In JavaScript: create a table element, populate it with tr and td elements 
> to which you add a text element with data from the database. Position the 
> table (absolute) next to the cell that called it up. Attach to each element 
> the appropriate event (click or mouseover). Etc. I guess there will be 
> libraries to do the bulk of the work for you.
> Tom

Thanks for your Help. Tom. What I want is a Selection drop down box and there will be only one switch box at start. Then the user need to click the selection 
box to prompt next selection box. I have tried to search the Internet, but I cannot find out any useful library to do it. I guess it is because English is my second language. So would you mind to give me some keywords to search the Internet. Thanks.

[toc] | [prev] | [next] | [standalone]

#12474

On Mar 7, 4:25 am, hon123456 <peterhon...@yahoo.com.hk> wrote:
>       I want to create 4 level drop downlist box in my page. When user
> select a value in drop down list box, then a second drop down list box
> will be shown out with content populated from database based on the
> value of first drop down list box,  [ ... ]

There are many examples if you search the web for "cascading select
boxes".

This is not terribly difficult, but it's a rather large topic for a
single news post.  If you have an attempt that's not working the way
you'd like, post some code here (or a link, or, even better, both) and
you might get some people interested in helping find issues.

  -- Scott

[toc] | [prev] | [next] | [standalone]

#12475

Le 07/03/12 10:25, hon123456 a écrit :
> Dear all,
>        I want to create 4 level drop downlist box in my page. When user
> select a value in drop down list box, then a second drop down list box
> will be shown out with content populated from database based on the
> value of first drop down list box,

> How can I do that? Thanks.



= JS =
======

function newDropBox(liste,number) {
liste = eval(liste);
var d = document.createElement('select'), // create new select
     n = liste.length,
     v, o;
d.name = companies[number-1];
d.id = 'choices_'+number;
d.onchange = function() { newDropBox(this.value, number+1); };
while(n--) {
   v = liste[n].split(';');   // value and text of option n
   o = new Option(v[1], v[0]); // create the option
   d[d.options.length] = o;     // add the new option to the new select
   }
// delete the next selects if present
n = 5;
while(n-- && n>=number) {
    v = document.getElementById('choices_'+n);
    if(v) v.parentNode.removeChild(v);
    }
// display the new select in right place
document.getElementById(
	'choices_'+(number-1)
	).parentNode.appendChild(d);
}

/* some arrays - to fill up the dropboxes */
var companies = ['company','staff','department','team'];
var company1 = ['name01;name 01 ltd','name02;name 02 ltd'];
var   name01 = ['staff001;staff 001','staff002;staff 002'];
var   name02 = ['staff011;staff 011','staff012;staff 012'];
var staff001 = ['team0001;team 0001','team0002;team 0002'];
var staff002 = ['team0011;team 0111','team0012;team 0012'];
var staff011 = ['team0101;team 0101','team0102;team 0102'];
var staff012 = ['team0111;team 0011','team0012;team 0112'];
var company2 = ['name11;name 01 ltd','name12;name 12 ltd'];
var   name11 = ['staff101;staff 101','staff102;staff 102'];
var   name12 = ['staff111;staff 111','staff112;staff 112'];
var staff101 = ['team1001;team 0001','team1002;team 1002'];
var staff102 = ['team1011;team 0111','team1012;team 1012'];
var staff111 = ['team2101;team 0101','team2102;team 2102'];
var staff112 = ['team2111;team 0011','team2012;team 2112'];


= html =
========

<p>
   <select id="choices_1" name="company"
      onchange="newDropBox(this.value,2)">
        <option value="company1">company 1</option>
        <option value="company2">company 2</option>
   </select>
</p>



-- 
Stéphane Moriaux avec/with iMac-intel

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web