Bar2aYunie 0 Newbie Poster

Hello,

I am trying to build a combo menu that contains 5 drop down lists and when sombody selects an item from the first drop down menu, new options appear in the second one. People choose an option there, and more options appear in the third one, and so on.

I've got the following code so far:

<script language="JavaScript">

var num_of_cats = 3;
var open_in_newwindow=0;
var option_array = new Array(num_of_cats);

option_array[0] = new Array("Select product"); 

option_array[1] = new Array("-- Select --",
"8,5 x 5,5 cm",
"Round",
"Standing",
"Flat");

option_array[2] = new Array("-- Select --",
"A4: 29,7 x 21 cm",
"A5: 21 x 14,8 cm");

var text_array = new Array(num_of_cats);

text_array[0] = new Array("Here comes the text before somebody chose an option"); 

text_array[1] = new Array("This is the text for the first menu",
"Second menu text",
"third menu text");

text_array[2] = new Array("These days, it's important to keep up on the news. These sites will help you do that.",
"What list of news sites would be complete without it?",
"Here, you can get links to World News Tonight, or see video clips.");

text_array[3] = new Array("If you can't find it via other means, you'll need to find it with a search engine. These are some of the best.",
"Undoubtedly, the best search engine out there.",
"Their natural-language search sometimes comes up with results you won't get with other engines.");

var url_array = new Array(num_of_cats);

url_array[0] = new Array("#"); 

url_array[1] = new Array("#",
"http://javascriptkit.com/",
"http://www.news.com/",
"http://www.wired.com/");

url_array[2] = new Array("#",
"http://www.cnn.com/",
"http://abcnews.go.com/");

url_array[3] = new Array("#",
"http://www.google.com/",
"http://www.aj.com/");

function switch_select()

{
  for (loop = window.document.form_1.select_2.options.length-1; loop > 0; loop--)
  {
    window.document.form_1.select_2.options[loop] = null;
  }
  
  for (loop = 0; loop < option_array[window.document.form_1.select_1.selectedIndex].length; loop++)
  {
    window.document.form_1.select_2.options[loop] = new Option(option_array[window.document.form_1.select_1.selectedIndex][loop]);
  }
  
  window.document.form_1.select_2.selectedIndex = 0;
}
  
function switch_text()

{
  window.document.form_1.textarea_1.value = text_array[window.document.form_1.select_1.selectedIndex][window.document.form_1.select_2.selectedIndex];
}

function box()

{
  if (window.document.form_1.select_2.selectedIndex == 0)
  {
    alert("Where do you think you're going?");
  } else {
    if (open_in_newwindow==1)
    window.open(url_array[window.document.form_1.select_1.selectedIndex][window.document.form_1.select_2.selectedIndex],"_blank");
    else
    window.location=url_array[window.document.form_1.select_1.selectedIndex][window.document.form_1.select_2.selectedIndex]
  }
}

function set_orig()

{
  window.document.form_1.select_1.selectedIndex = 0;
  window.document.form_1.select_2.selectedIndex = 0;
}

window.onload=set_orig

// -->
</script>

<form name="form_1" onSubmit="return false;">
  <p>
  <table><tr>
  <td width="200">Select product</td>
<td>
    <select name="select_1" style="width:450px" onChange="switch_select(); switch_text();">
      <option>-- Select Product --</option>
      <option>Product 1</option>
      <option>Product 2</option>
    </select></td></tr></table>
  <table><tr>
  <td width="200">Select Size</td>
<td>
    <select name="select_2" style="width:450px" onChange="switch_text();">
      <option>-- Select Size</option>
      <option> </option>
      <option> </option>
    </select></td></tr></table>
  </p>
  <p>
    <textarea WRAP="virtual" name="textarea_1" rows=10 cols=80>Here comes the description text.</textarea>
  </p>
</form>

However, as I stated before, I need 5 boxes. But whatever I do, I cannot add in another menu. Everytime I try something, the first menu box doesn't even work anymore.

Can somebody please help me out?

It doesn't have to be this code exactly. As long as there's room for a description and 5 of those combo menu boxes. The description can also appear underneath every menu box (so not in a textarea box). And it doesn't have to appear after every menu box, as long as it appears after the last one. Also, only the last items have to be linked.

Thank you very much for helping me out! I'm lost!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.