Change SELECT options, based on an option on a previous select?

youradds · Apr 23, 2006

Hi,

I'm trying to update a SELECT form, based on the sub-cat they select (in the first box).

I'm afraid my Javascript is pretty crap,so if there is a better wa of doing this, please let me know

TIA - code is as follows;

Code:

<html>

<head>
<meta http-equiv="Content-Language" content="en-gb">
<meta name="GENERATOR" content="Microsoft FrontPage 6.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>SELECT 1</title>

<script>
function change_select(tvalue) {

  alert('foo' + tvalue);
  document.getElementById(tvalue).style.display = 'block';

}
</script>



</head>

<body>

<select name="selectname" onchange="change_select(this.value)">
 <option value="gcse">GCSE</option>
  <option value="alevel">A-Level</option>
   <option value="uni">University</option>
    <option value="ib">I.B.</option>
</select>

<select name="catid">

<div id="ib" name="ib" style="display: none" >
	<option value="42">World Literature</option>
	<option value="629">Uncategorised</option>
	<option value="115">Theory of Knowledge</option>
	<option value="257">Psychology</option>
	<option value="114">Physics</option>
	<option value="47">Misc</option>


</div>
<div id="gcse" name="gcse" style="display: none" >
	<option value="2">History</option>
	<option value="3">English Literature</option>
	<option value="140">William Wordsworth</option>
	<option value="4">Politics</option>
	<option value="5">English Language</option>
</div>

<div id="alevel" name="alevel" style="display: none" >
	<option value="41">Psychology</option>
	<option value="338">Art</option>
</div>


<div id="uni" name="uni" style="display: none" >
	<option value="43">Economics</option>
	<option value="49">Misc</option>
	<option value="59">History</option>
	<option value="119">Biology</option>
</div>


</select>

</body>

</html>

Cheers

Andy

richcleverley · Apr 24, 2006

I've just done this using a mix of php / mysql and javascript.

Basically I got it to refresh the page using javascript and passing a variable in the url so the php could retrieve the second set of values from the database.

I would like it without the refresh though. If you find out how that would be great.

Rich

rac2 · Apr 24, 2006

Use Google and search for "javascript dynamic combo boxes".

I like this one.





<!-- The JavaScript Source!!

http://javascript.internet.com

-->

HTH

theniteowl · Apr 24, 2006

youradds, there are a lot of possible approaches to this that vary depending on a number of things.
Check the FAQ section of this forum for Dynamic Listboxes. There are a few examples in there.

How many linked fields will you be using? Just two?
How many possible options will there be? A relatively small number (100 or so) or a very large number?

Where does the data come from? Will you be pulling it in from a database or will it be hard-coded into the script?

Do you have the ability to use server-side code like PHP, ASP or CGI?

Depending on your situation there are different approaches that may work better for you.

One approach is to submit the form when a selection is made at the first listbox and pass the selected value so when the page loads it knows which options to show in the second box. This causes the page to refresh though which I generally try to avoid.
Another option is to use javascript to dynamically alter the options inside of the second listbox when a selection is made in the first listbox. This method does not require the form to be submitted or cause the page to be refreshed but it does require that javascript be enabled on the end-users PC otherwise the options will never show up in the second box.

I do this in a couple of my applications by storing all of the options in arrays and when an option is changed in the first listbox I rebuild the options list in the second box directly with the correct values from the array. This way all the options are available to the script without having to reload the page to download a new selection of options.
If I had thousands of possible combinations then it might be too much to store all of the values in the array and I would go back out to the server to get the new values when needed.

As I said, it has a lot to do with your data, how you want things to work and what type of server-side scripting you have available.

Let us know and we can make better suggestions specific to your needs but take a look at the examples in the FAQ section and you can get a feel for how to do it.

Paranoid? ME?? Who wants to know????

youradds · Apr 24, 2006

Hi rac2, thanks for the Google query - the first one is exactly what I'm looking for

We only have about 100-200 entries that need to be assigned, so its not going to be a huge file.

I guess just changing

data_2_1 = new Option("21", "--");

..to;

data_2_1 = new Option("name to show", "numeric_category_id");

..will work?

Basically, I need to send a category ID, instead of the name - when doing a search (via a Perl script).

TIA

Andy

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!

Change SELECT options, based on an option on a previous select?

youradds

Programmer

richcleverley

MIS

rac2

Programmer

theniteowl

Programmer

youradds

Programmer

Similar threads

Part and Inventory Search

Sponsor