AJAX / Javascript / PHP Triple Drop Down Menu from different tables

Question

I have been looking for this for so many days, but still could not understand.

I want to create a drop-down menu for the search and the stream will be like this:

1st Dropdown

Search by:

Category

Mark

Location

The supplier

Owner

And as soon as the user clicks on one of the above, the second DropDown should display the corresponding list in accordance with the 1st DropDown:

For example, 1st DropDown = Category:

2nd Dropdown

Limit:

Laptop

Desktop

router

LCD

Scanner

Or 1st DropDown = Brand:

2nd Dropdown

Limit:

Dell

Sony

HP

Samsung

Acer

And the third DropDown menu will be Order By 1 DropDown, for example:

3rd dropdown

Sort by:

Category

Mark

Location

The supplier

Owner

My problem is that each parameter in the 1st DropDown has its own table, and this will bring up the second DropDown menu, and for some reason I cannot figure out what to call it. All the tutorials and examples I found run something in the first DropDown menu, which is within 1 table, and the 2nd and 3rd DropDown can call up another table. (For example: Country, State, City).

Therefore, I want to know if this is possible when the first DropDown menu is from different tables, the second DropDown menu will be populated from the first DropDown menu option, and the 3rd DropDown menu will order the second DropDown menu with the 1st DropDown menu item.

I hope you understand what I ask, and I really hope to receive feedback very soon, this is so necessary. Thanks, and I really appreciate it!

EDITED

search.html

..... <form id="drop_list" name="drop_list" action="searchedasset.php" method="post" > <fieldset><table><tr> <thead> <tr><legend><b>SEARCH ASSET</b></legend></tr> </thead> <tbody> <tr> <!--code for the first list box--> <td>Search By :</td> <td><select name="cat_id" onChange="SelectSubCat1();" > <Option value="">Choose Search By</option> </SELECT> </td> </tr> <tr> <td>Limit By :</td> <td><select id="SubCat1" name="SubCat1"> <Option value="">Choose Limit By</option> </SELECT> </td> </tr> <tr> <td>Order By :</td> <td><select name="SubCat2"> <option value="">Choose Order By</option> <option value="1">Brand </option> <option value="2">Category </option> <option value="3">Project </option> </select> </td> </tr> </tbody> </tr></table></fieldset> ..... 

search.js

 function fillSearch(){ // this function is used to fill the category list on load addOption(document.drop_list.cat_id, "1", "Brand", ""); addOption(document.drop_list.cat_id, "2", "Category", ""); addOption(document.drop_list.cat_id, "3", "Project", ""); } function SelectSubCat1(){ // ON selection of category this function will work removeAllOptions(document.drop_list.SubCat1); //clear all the elements of the second list addOption(document.drop_list.SubCat1, "", "Choose Limit By", ""); if(document.drop_list.cat_id.value == '1'){ addOption(document.drop_list.SubCat1,"1", "DELL"); addOption(document.drop_list.SubCat1,"2", "ACER"); addOption(document.drop_list.SubCat1,"3", "SONY"); addOption(document.drop_list.SubCat1,"4", "SAMSUNG"); addOption(document.drop_list.SubCat1,"5", "APPLE"); } if(document.drop_list.cat_id.value == '2'){ addOption(document.drop_list.SubCat1,"='1'", "Notebook"); addOption(document.drop_list.SubCat1,"2", "Desktop"); addOption(document.drop_list.SubCat1,"3", "LCD Projector"); addOption(document.drop_list.SubCat1,"4", "Scanner"); addOption(document.drop_list.SubCat1,"5", "Printer"); } if(document.drop_list.cat_id.value == '3'){ addOption(document.drop_list.SubCat1,"1", "1st Purchase"); addOption(document.drop_list.SubCat1,"2", "2nd Purchase"); addOption(document.drop_list.SubCat1,"3", "3rd Purchase"); addOption(document.drop_list.SubCat1,"4", "4th Purchase"); addOption(document.drop_list.SubCat1,"5", "5th Purchase"); } } } ..... 

Note that SubCat1 was supposedly from three different tables that have a different name:

eg. [cat_id.value == '1', SubCat1 == 'brandid'] [cat_id.value == '2', SubCat1 == 'categoryid'] [cat_id.value == '3', SubCat1 == 'purchaseid' ]

So can we do this? Change SubCat1 according to their name in the database? This displays the data on the next page. Thanks.

Answer 1

im not sure if js syntax is correct, but the idea is here:

 <?php $category = //result from table category $brands= //result from table category ?> <script> var categories = <?php json_encode($category);?> var brands= <?php json_encode($brands);?> </script> <select id="categories_selector" onchange="populateBrand(this.value)"> </option value="">Select Category</option> </option value="1">Cat 1</option> ... </option value="2">Cat 2</option> </select> <select id="brands_selector"> //no options yet </select> <script> function populateBrand(category_id) { var aOptions = []; for(var i in brands) if(brands[i].category == category_id) { var oOption = document.createElement('option'); oOption.id = brands[i].id; oOption.value = brands[i].name; aOptions.push(oOption); } var oBrands = document.getElementById('brands_selector'); oBrands.addOptions(aOptions); } </script> 

Answer 2

You can achieve this by building valid representations for your task. The presentation should be based on a structure similar to the one below:

column1 column2 column3

({Category}, {Laptop, Desktop, Router, LCD, Scanner}, {Category, Brand, Location, Supplier, Owner}), ({Brand}, {Dell, Sony, HP, Samsung, Acer}, {Category, Brand, Location, Supplier, Owner}), etc.

for columns 2 and 3, you can call a function like group_concat (if you are using mysql) or a similar function in other databases.

Once this is available, you can easily fill out the list. Load column 1 data into the first drop-down list. When this changes, extract column2 and column3 based on this selection and load them into dropdown2 and dropdown3. You need to split the contents of column2 and column3 into arrays and load them.

Did this solve your problem?

---

You can do the following: Well, you cannot generate all things directly from the database.

You need to split the process. For the rendering process, you need to a certain extent to get the required data created from the database, and using this, you need to change other information.

I can say this:

• Define the views in the database with the required format and associations for the initial pull-up.
• Extract the data in the scripting language, which in this case is php.
• Format the data received by receiving the appropriate requests to download the necessary information.
• Cross it with routines at the end of ajax, for example, on-change for a drop-down list to get the corresponding data.

You need to have separate functions in php and ajax for modeling, namely: to load the first drop-down list, to load the second and third drop-down list. Match it with php and ajax and your problems won't go away.

Hope this will give you an idea!