Skip to content Skip to sidebar Skip to footer

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

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

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

<scripttype="text/javascript">// Initialization Codevar currentSelect = 1; // Keeps track of which select box is current// New Select Box codefunctioncreateNewBox()
{
    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.

Post a Comment for "Multiple Dynamic Selections"