CODEWITHSUNDEEP
javascripthtmldrop-down-menu
martincarlin87
martincarlin87

Reputation: 11042

Create drop-down list using JavaScript instead of HTML

I have the following code that creates and deletes text boxes using javascript:

http://jsfiddle.net/JpYGg/8/

What I am aiming to do is infact create a set of three drop-down lists using this functionality instead of creating a textbox.

The code for the three drop-downs is shown here: http://jsfiddle.net/MWH99/

I am a bit stuck as to how to achieve this. I added in the "dropdown" div and what I was thinking is to get the innerHTML of this div in order to use that to create the three lists every time?

The other question I have is how to have it so that these are generated by the javascript instead of an HTML one AND a JavaScript version.

Thank you for any help.

Martin

EDIT I have the buttons working to create the next row of 3 drop-downs but they do not function the way that the original does, the parent drop-downs use javascript to identify the selection in the first drop-down in order to update the other two whereas the cloned ones lose this functionality.

Code cna be found here:

http://pastebin.com/pt1wef76

Original drop downs use dropdown.js which is http://pastebin.com/bDLpFWJY

Upvotes: 1

Views: 8805

Answers (2)

khamer
khamer

Reputation: 139

There's two basic approaches; create all of the elements in JavaScript, or copy a part of the DOM (some HTML) over and over.

People often put HTML in script tags (see jQuery Templating, for example), and then get the innerHTML of the tag and use that. For example,

<script type="text/plain" id="template">
    <!-- HTML that you want to duplicate in here -->
</script>
<div id="contentcontainer">
</div>
...
<script type="text/javascript">
var addAnother = function( ) {
    $("#contentcontainer").append(
        $("#template").html()
    );
};
</script>

This example makes use of jQuery primarily because jQuery is a lot less verbose and easier to read, but you certainly don't have to use jQuery. Here, the addAnother function will copy the HTML from #template and append it into #contentcontainer.

In your attempt above, you probably meant $('body').append($('#dropdown')); '#dropdown' is just a string, $('#dropdown') returns the element (or elements) with id="dropdown".

Upvotes: 2

Billy Moon
Billy Moon

Reputation: 58531

Why not use a javascript library like jQuery for example. Would make this and many other things much easier. Could achieve what you want like this:

$('body').append('<!-- ANY HTML GOES HERE -->')

Upvotes: 3

Related Questions