Reload Dropdown list without refresing page

How can I execute this:

From the dropdown list build up from mysql database (say a list of fruits).

I select “Add New Fruit”. This triggers it to either have a modal form to add new fruit or a table form.

Once submitted, Select dropdown list RELOADS including the newly added data (fruit) without reloading the whole page which contains other form control such as textbox.

You’ll have to do it with an AJAX call and insert the response into the page.

I do this kind of thing with jQuery quite often and it works a treat. :slight_smile:

There are going to be two parts to this: the JavaScript on the client and the [insert language of your choice] on the server.

On the Client

As infoxicated said, jQuery is way, way simpler than trying to do this yourself. In particular, it has a load function that makes an AJAX request, assumes that the returned data is HTML, and inserts the HTML into whatever element you choose:


$(yourSelect).load('somepage.php'); // so easy!

On the Server

The only argument you’ll (probably) need to pass to the load function is the URL of a page that will spit out an HTML fragment. I used PHP in that example, but only because that’s the only language I know. It can be any type you want.

Whatever language you choose, it needs to do the following:

  1. Get the current list from the database.
  2. Turn that list into an HTML string.
  3. Echo or print the string.