<script type="text/javascript">
var arr = [{
val: 1,
text: 'Option 1'
}, {
val: 2,
text: 'Option 2'
}];
$(function () {
$('a').click(function () {
var sel = $('<select>').appendTo('body');
var textbox = $('<input type="text" />');
$('<br>').appendTo('body');
$(arr).each(function () {
sel.append($("<option>").attr('value', this.val).text(this.text));
});
return false;
});
});
</script>
<a href="">Add Select Box</a>
When the anchor tag is clicked in the code above, select boxes appear. If the anchor tag is clicked multiple times, each click will show a new select box on a new line with a text box alongside it. Any assistance on ensuring these elements display correctly would be greatly appreciated. Thank you in advance.
CSS for the code...
a {display: block; background-color: #eee; border: 1px solid #aaa; color: #000; text-decoration: none; width: 200px; padding: 5px; font-family: arial; text-align: center;}
</style>