Help with dynamic drop down list

chex · #1 (**permalink**) 08-03-06, 12:38 PM

So I'm not a JS guru by any means and I've spent the majority of the morning looking for an example of what I need and the only thing I can find that's close are the javascript examples where the arrays are hard coded.

What I need is two drop down boxes. One drop down box is hard coded with a list of users. The second drop down box should be populated based on the value of the user for the first. The first select would look like :

Code:

<select name=person size=1>
            	<option value=''>Select Name
            	<option value='001'>Bob
            	<option value='002'>Ted
            	<option value='003'>Fred
... etc ...
            	</select>

The values for my second drop down box would be retrieved from running a cgi script using a format similar to

Code:

virtual('/cgi-bin/script.cgi?id=001')

Currently my web page is php and the cgi script is perl which will generate php. I can change the script so it generates simply an array or list of strings or whatever, but what I don't know is javascript (or if php has a way to do this more easily) well enough to tie these things in together.

Thanks.

TwoD · #2 (**permalink**) 08-03-06, 01:51 PM

This is a common problem.
I made a search for populate select in the JavaScript section.
It returned a list of threads discussing this problem.
You can also check out QuirksMode for an article about poluating drop-down boxes under JavaScript->Forms->Dynamic options.
It uses JavaScript arrays to hold the data, not querying a server, but it should give you an idea on how to do it once you have the data.

You could also make the server regenerate the site when something is selected from the drop down list by using the onchange="" even of the selectbox and appending the value of the selected option to a querystring when reloading the page.
Or you could use AJAX, and only request the new data from the server. Then you won't have to update the whole page.

Sorry for giving so short explanations, but I've got a thing to take care of in a couple of minutes...

chex · #3 (**permalink**) 08-03-06, 03:44 PM

Thanks for the tips I now have what I was looking for mostly working by going with the onsubmit method.

The one piece I'm lacking is maintaining the first selected drop down.

Below is the code I'm dealing with now; apologies for the bloat, but I didn't write this, I'm just updating it.

Code:

<?php
app('<head>');
app('<script language="Javascript">;');
app('function reload(form)');
app('{');
app('var val=form.person.options[form.person.options.selectedIndex].value;');
app('self.location=\'maintpage.php?filter=\' + val;');
app('}');
app('</script>');
app('</head>');

$filter = $_GET['filter'];

app("<form name=maint_submit method=post onsubmit = 'return checkInput(this)' action=maintpage_insert.php>");
app("<br>");
    app_begintable("80%",NULL,0,2,2);
        app_beginrow();
            app_cell("<p class='medium'><b>User</b></p>","",NULL,"darkbg","left","top",NULL,0);
            app_begincell("",NULL,"darkbg","left","top",NULL,0);
            app('<select name=person size=1 onchange="reload(this.form)"');
            app('<option value=\'\'>Select Name');
//            if((isset($filter)) and (strlen($filter) >0)){
//            	app('<option selected value=$filter>Selected User');
//            	}
            app('<option label=\'Bob\' value=\'001\'>Bob');
            app('<option label=\'Dan\' value=\'002\'>Dan');
            app('<option label=\'Tom\' value=\'003\'>Tom');
            app('</select>');
            app_endcell();
        app_endrow();
        app_beginrow();
            app_cell("<p class='medium'><b>Numbers</b></p>","",NULL,"darkbg","left","top",NULL,0);
            app_begincell("",NULL,"darkbg","left","top",NULL,0);
            app('<SELECT NAME =\'numbers\' size=1 >');
			app('<option value=\'\'>Select numbers');
            if((isset($filter)) and (strlen($filter) >0)){
            	virtual("/cgi-bin/script.cgi?filter=$filter");
            	}
			app('</select>');
			app('</td>');
			app('</tr>');
            app_endcell();
.......
?>

The three commented lines was something I was tinkering with, but I can't figure out how to do some what of a reverse lookup of the label based on the value.

Thanks.

TwoD · #4 (**permalink**) 08-04-06, 02:05 PM

Do you mean maintaining which user was selected during reload?
Why not append that info to the querystring too, and make the PHP code
insert a SELECTED attribute when printing out the options for the first box if the querystring is there?

chex · #5 (**permalink**) 08-07-06, 10:37 AM

Yes that's what I was thinking, I just thought I could do some sort of reverse lookup based on the value to determine the label and then create the the SELECTED line.

Thanks for your suggestions and help!