Multiple Dynamic Selections

I need a way of having multiple selections but only one visible at a time. When the user wants to add another selection he/she clicks a button,checkbox,radio..whatever They need t

Solution 1:

Old question, but might as well add my 2 cents, in case anyone else wants to know an answer.

I would use JavaScript to create a <select> element in a "more" section, from a JavaScript loop. For example, your first page would have

<input type="button" value="New Select Box" onclick="createNewBox();" /><br />
<span id="selectElement1">
    <select>[your code for the select box goes here]</select>
    <span id="selectElement2"></span>
</span>

Which could setup your basic select element, and the New Select Box would activate this JavaScript function code:

<script type="text/javascript">
// Initialization Code
var currentSelect = 1; // Keeps track of which select box is current

// New Select Box code
function createNewBox()
{
    var currentSelect = currentSelect + 1;
    var nextSelect = currentSelect + 1;
    document.getElementById('selectElement'+currentSelect).innerHTML = "<select>[code goes here]</select><span id=\"selectElement"+nextSelect+"\"></span>";
}
</script>

This whole thing can run with only those two code snippets, and no jQuery code is needed.