Search the Community

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!