1

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

2 Answers 2

3

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 -->')
4
  • Thanks, I tried just putting the drop-down menu code inside the '' but it doesn't work. Also tried $('body').append('#dropdown') but that literally prints out #dropdown for some reason instead of the div! Commented Mar 28, 2011 at 13:21
  • @martincarlin87 : It should. If you want to that, have a look at this: $('body').append($("#dropdown").html()); Commented Mar 28, 2011 at 13:58
  • Thanks, I got it to work using <script type="text/javascript"> function addNew() { var cloned = $('#dropdown').clone(); cloned.appendTo("#advancedsearch") }; </script> but the clones don't function the way the original does as the original is dynamic and populates the other two based on the selection in the first drop-down menu. Do you know why thsi would happen? Commented Mar 28, 2011 at 14:12
  • Clones have not copied data and events over. I think there is a second option on clone that copies events. Otherwise, you need to re-bind the events to the new elements. Put the code on jsfiddle and I can have a look at it.
    – Billy Moon
    Commented Mar 29, 2011 at 11:10
2

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".

1
  • Thanks, I got it to work using <script type="text/javascript"> function addNew() { var cloned = $('#dropdown').clone(); cloned.appendTo("#advancedsearch") }; </script> but the clones don't function the way the original does as the original is dynamic and populates the other two based on the selection in the first drop-down menu. Do you know why thsi would happen? Commented Mar 28, 2011 at 14:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.