• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 168
  • Last Modified:

A question about forms and javascript ...

Okay ... this is what I want to do:

I've got a form on my page and two dropdown combo boxes.  When I select a value in the first combobox, I want the contents of the second combobox to change, according to the value in the first one.

Example:
In the first combo i've got:
Nissan
Toyota
Ford

and when I select Nissan, the second combobox gives me:
Sunny
300Zx
Primera

or something,

And when I select Toyota, the contents will change to:

Camry
Avensis
Celica


How do I do that?





0
hagur
Asked:
hagur
  • 2
  • 2
1 Solution
 
freshmeatCommented:
1,define some arrays in header/script of client

2, according to the first selection's value, the script decides which array should be put into the second selection

:)
do u need code?
i forgot the detail, but i will find it and post it here tomorrow, now i am pretty busy

also wish other experts can solve this problem for u!

0
 
hagurAuthor Commented:
Thanks, but a working code would be appreciated, since I'm not very familiar with javascript.
0
 
mayhewCommented:
Give this a try.

http://www.mayhewnet.com/hagur.htm


The code is as follows:
=======================
<script language="javascript">

function ChangeSecond() {

  switch (document.MyForm.First.selectedIndex){
    case 0:
      document.MyForm.Second.options[0] = new Option('Sunny');
      document.MyForm.Second.options[1] = new Option('300Zx');
      document.MyForm.Second.options[2] = new Option('Primera');

      //You need to set the length so that old data will
      //  be deleted if it went over the number of elements
      //  for this option.
      //For example, say you select Ford, which has four options,
      //  and then select Nissan, which has three options.
      //  If you don't do this next step, options 1 through 3 will
      //  will change to the Nissan options, but the fourth Ford
      //  will also stay visible.
      document.MyForm.Second.options.length = 3;
      break;
    case 1:
      document.MyForm.Second.options[0] = new Option('Camry');
      document.MyForm.Second.options[1] = new Option('Celica');

      document.MyForm.Second.options.length = 2;
      break;
    case 2:
      document.MyForm.Second.options[0] = new Option('Taurus');
      document.MyForm.Second.options[1] = new Option('Thunderbird');
      document.MyForm.Second.options[2] = new Option('Mustang');
      document.MyForm.Second.options[3] = new Option('Explorer');

      document.MyForm.Second.options.length = 4;
      break;
  }

}

</script>

<body onload="ChangeSecond()">
<form name="MyForm">

<select name="First" onchange="ChangeSecond()">
  <option>Nissan
  <option>Toyota
  <option>Ford
</select>

<select name="Second">
</select>

</form>

</body>



Let me know if this is helpful.
0
 
hagurAuthor Commented:
Thanks alot, this code seems to work exactly like I needed it to!

Thanks again

Points := Points+50;
0
 
mayhewCommented:
Hey great!

I'm glad that worked.  :)
0

Featured Post

Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now