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?





LVL 3
hagurAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.