Add select (dropdown) boxes using jQuery

[jenkins]

Hi,

I need to implement a function that will allow a user to add a <select> (dropdown) box when clicking a button and be able to keep adding a <select> when clicking the button.

I am totally new to jQuery but this is what I have so far:

<label for="characteristic" id="characteristic_label">Add Characteristic</label>
      
<input type="button" id="buttonToAddChar" value="Add" style="cursor:pointer;" />
<div id="newCharacteristic" style="display:block; width:100px;"></div>


<script>
$("#buttonToAddChar").click(function () {
     var newChar = $("<select/>");
     $(newChar).append("<option><?PHP echo "Select from list"; ?></option>");
     $("#newCharacteristic").append(newChar);

});
</script>
 

This does work (screenshot attached) but I need to add the following features:

1. The options for each <select> dropdown should come from a mySQL query (and each additional <select> added should not contain the option chosen in previous <select> dropdowns)

2. Add the option for a user to remove a <select> previously added (I think another function, right?)

3. Submit/save the option chosen in each <select> to a mySQL table (I can do this using a form, but what is the best way to get the option chosen from each dropdown?)

 

Am I going in the right direction?  How difficult is this going to be for a jQuery newbie?  

 

Any help would be greatly appreciated.

Thank you!

 

[teynon]

You are going to need to use an AJAX request and use the results to build your select. 

Here is a quick random google'd ajax jquery tutorial:http://www.php4every1.com/tutorials/jquery-ajax-tutorial/

 

You'll need to build the select and append it the way you are doing now. Only difference being that you are using an ajax request.