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.
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:
- Get the current list from the database.
- Turn that list into an HTML string.
- Echo or print the string.