Appending html data when item in html select list is selected
- by Workoholic
I have a selector that could look like this:
<label for="testselector">Test</label><br />
<select id="testselector" name="test[]" size="5" multiple="multiple">
<option name="test_1" value="1">Test Entry X</option>
<option name="test_3" value="2">Test Entry Y</option>
<option name="test_5" value="5">Test Entry Z</option>
</select>
<div id="fieldcontainer"></div>
When an entry from the above fields is selected, I want two form fields to appear. I use jquery to add them:
$("#fieldcontainer").append("<div><label for=\"testurl\">Test Url</label><br /><input name=\"testurl[]\" type=\"text\" id=\"testurl_1\" value=\"\" /></div>");
$("#fieldcontainer").append("<div><label for=\"testpath\">Test Path</label><br /><input name=\"testpath[]\" type=\"text\" id=\"testpath_1\" value=\"\" /></div>");
I can easily add a click handler to make those form fields appear.
But how would I keep track of what form fields were already added? When multiple fields are selected, the appropriate number of input fields needs to be added to the fieldcontainer div. And if they are unselected, the input fields need to be removed again.
I also need to retrieve the value from the options in the select list to add them as identifier in the added input fields...
