Demo of linked drop down list by using Ajax & PHP ( Multiple Selection )


Select more than one ( Multiple )



Press & Hold the Ctrl button to select multiple options ( for windows )
Command button for Mac

Submit this form and see how the form components data are available in action page of the form.

Two dropdown list (single selection)

Tutorial on Ajax PHP drop down list box

Multiple Selection script.

This script is developed based on the same principle of single dropdown list using Ajax and PHP. To understand multiple selection it is advisable to learn first single selection dependent dropdown lists tutorial. We will be discussing more on changes required to be done to handle multiple selection of dropdown list.

Multiple selection dropdown listbox.

You can read the basics of Multiple selection dropdown listbox in our HTML Section. Read how to handle multiple selection of a dropdown listbox by using PHP.

main-multiple.php

In our previous tutorial we were getting one single selection or value of cat_id once the user select one option. Here we will get one array of cat_id values based on selection of user.

var s1ar=document.getElementById('s1');

s1ar is an array hence we will create one string using all the elements of the array. Each element will be separated by coma. Here is the code.

for (i=0;i< s1ar.length;i++) {
if(s1ar[i].selected){
str += s1ar[i].value + ',';
}
}

In the above code we have to remove last coma.

var str=str.slice(0,str.length -1); // remove the last coma from string

Now we will post the string with all the selected options (or cat_id) to backed PHP script to collect the matching subcat_id and subcategory from subcategory table. Posting of data is same as single selection box tutorial.

Now let us learn how to collect the string with selected options and then process for data collection in our backed php script.

dd-multiple.php

We will receive selected options as a string. Each option will be separated by coma.
Before using this string variable in our SQL we will sanitize the data.

$mn=explode(",",$cat_id); // creating array
while (list ($key, $val) = each ($mn)) {
//echo "$key -> $val <br>"; // display elements if you want
if(!is_numeric($val)){ // checking each element
echo "Data Error ";
exit;
}
}

Now we will use SQL IN command to get the records from subcategory table. Rest of the code is same as single selection tutorial.

You can download the script here. The zip file contains both single selection and multiple selection

download script



priyanka

22-05-2014

where can i download this script? urgently needed... please help
smo

22-05-2014

Download link is at the top menu. Now one button is added at the end of the page. It will be further improved. Thanks.
vaishakh

11-12-2014

I download the Zip file for the mulitple selection code , it vl give me error like , unexpected end of data at line 1 column 1 of the JSON data,, when i click on main category,, it vl nt display the subcategory
smo

12-12-2014

There is no problem. Check that you have created the tables with data by using sql_dump file. Ensure that database connection is available and first list should populate with relevant data
bhavin

03-06-2015

plzz share cascading dropdown for multiple tables i'm stuck in this issues since 4-5 days...
thank u
David Makgale

05-07-2016

database connection is available and first list is populate with relevant data.
after selecting one of the values on the first dropdown, the second dropdown does not show any values. what can be wrong?

Post your comments , suggestion , error , requirements etc here .




We use cookies to improve your browsing experience. . Learn more
HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
©2000-2024 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer