Understanding JavaScript - respond. In general, the situation is as follows. There is a form

<form name="catalog" action="" method="POST"> <div align="center" style="border: solid 1px #cccccc;"> <table style="margin: 5px 10px 5px 10px;" border="0" cellpadding="3" cellspacing="0"> <tr valign="middle"> <td align="right">Выбор значения:</td><td nowrap> <select class=select id="brands_id" name="category" onchange="catalog_rebuild(this.options[this.selectedIndex].value)"><option value="0">--- <option value="1">Какое-то значение первого селекта </select> <select id="models_id" name="car" class=select><option value="0">---</select> <script language="javascript"> <!-- function catalog_rebuild(a){ switch (a) { case '0': with (document.catalog.car) { options.length = 0; options[0] = new Option('---', '0'); selectedIndex = 0; }; break; case '1': with (document.catalog.car) { options.length= 0; options[0]= new Option('---','0'); options[1]= new Option('Какое-то значение второго select','2'); options[2]= new Option('Какое-то значение второго select','3'); selectedIndex=0; }; break; } } function catalog_init(){ catalog_rebuild(document.catalog.category.options[document.category.selectedIndex].value); for (var i=0; i<document.catalog.car.options.length; i++) { if (document.catalog.car.options[i].value== selected_car) { document.catalog.car.options[i].selected= true; } } } var selected_category = 0; var selected_car = 0; catalog_init(); //--></script> </td> </tr> </table> </div> </form>

With the filling script - select on the selected value. But the form robs only on 2 select tags. Actually, I need the following: when choosing a value from the 1st selecta, the second select is automatically filled with the values ​​we need, and already when choosing a value from the second, the select is automatically filled with the values ​​3 select. And finally, a living example of what I want: Suppose I choose "Ice Cream" - the following menu gives me a list of syrup for ice cream - I choose "Strawberry Syrup" - the following list displays "in a cup" or "in a cup" - well, and further down the list . To make the question clearer, create a file index.html and paste my code into it. See the result.

  • And what's the problem? =) By analogy, you can do ^^ Be careful - checked with a copy-paste - it works. - Alexey Sonkin
  • Similarly?? Tobish assign the second function to the second selector and already bind a switch with a new variable to this function ?? - Respayn
  • Yes, even though it is byakokod, but it will work) And to do better according to the method proposed. - Alexey Sonkin

1 answer 1

Tin, ajax technology do not want to use? :)

Well, do not want so do not want. This is how the structure of what you want should look like:

 var s_arr1 = ['Мороженное', 'Диваны']; var s_arr2 = { '0': ['В стаканчике', 'В чем-нибудь еще'], '1':['Деревянный', 'Для садо-мазо'] }; var s_arr3 = {'0': // Берем первый элемент из s_arr1 {'0': // Берем первый элемент из s_arr2 ['Ну значит в стаканчике', 'Ну или не в стаканчике'] } }