embed dropdown into html form using jquery

embed dropdown into html form using jquery

Im trying to embed a drop down to a form using jquery, and the dropdown itself isnt appearing.

The idea is that a user clicks a link and this function is called and the form is created, im far off where i need to be but im working with little steps and each day is a challenge as I'm sort of learning on the go.

hopefully you will see what im trying to do

[code]





<p><a href="#" onClick="active_tiptip()">Form Click</a></p>

<div id="test" style="position:relative; width:100%; height:200px; background-color:#FF0000;">

</div>

 

function active_tiptip() {
selectValuesA = { "1": "test 1", "2": "test 2" };
selectValuesB = { "1": "test 1", "2": "test 2" };
selectValuesC = { "1": "test 1", "2": "test 2" };


$('#test')
        .append('<form id="form1" name="form1"></form>');
$('#form1')
        .attr("action","#") .attr("method","post")
$.each(selectValuesA, function(key, value) {
$('#form1')  
         .append($("<option></option>")
         .attr("value",key)
         .text(value));
});
$.each(selectValuesB, function(key, value) { 
$('#form1')
         .append($("<option></option>")
         .attr("value",key)
         .text(value));
});
$.each(selectValuesC, function(key, value) {
$('#form1') 
         .append($("<option></option>")
         .attr("value",key)
         .text(value));
});
}
[/code]