Cloning a drop down box

rcam

Im still very new to php.

I have a drop down list linked to an xml file in a form. (Obviously the page is .php)

How can I make the 'client' press a button "ADD" and the drop down list is cloned under the first one every time the button is clicked (if its clicked 10 times there will be 10 drop down lists each connected to the xml file allowing the client to make multiple choices) ?

Ashley_Sheridan

When you say drop down list I assume you actually meant select list? If you just want to clone this, then you don't need PHP, you can do this in Javascript, or more specifically jQuery. Normally I don't advocate the use of jQuery for single tasks (it's a large library) but for this particular task it's very well suited and makes things a lot easier!

The docs for the clone method are at http://api.jquery.com/clone/

rcam

Thanks 🙂

I tried it and its working. Is there a way to know what the ID or class of the cloned lists will be ?

Weedpacket

rcam wrote:
I tried it and its working. Is there a way to know what the ID or class of the cloned lists will be ?

Let's see... reading http://api.jquery.com/clone/ there is a Note: in extra-large text:

Note: Using .clone() has the side-effect of producing elements with duplicate id attributes, which are supposed to be unique. Where possible, it is recommended to avoid cloning elements with this attribute or using class attributes as identifiers instead.

That answers your question.

To deal with the ID issue, there is another Note: a little earlier in the page:

Note: When using the .clone() method, you can modify the cloned elements or their contents before (re-)inserting them into the document.

So you can change the IDs before reinsertion (though of course it requires finding them and knowing what they can be changed to without causing collisions elsewhere).

johanafm

Ashley Sheridan;11022011 wrote:
Normally I don't advocate the use of jQuery for single tasks (it's a large library)

At 94k in minimized form, I don't really agree with this. Unless you're specifically targetting handheld devices using 3G or similar and go out of your way to minimize your entire footprint. Otherwise... it's one

Ashley Sheridan;11022011 wrote:
but for this particular task it's very well suited and makes things a lot easier!

But for those that do feel like you do, I'd say this is actually an example of a single purpose task where you really shouldn't be using jQuery, since cloneNode has been in browsers for... ever (DOM level 2 spec, implemented since IE6 iirc)?
https://developer.mozilla.org/en-US/docs/DOM/Node.cloneNode

Ashley_Sheridan

I did not know about cloneNode, very useful.

I know 94k is quite small in todays terms, but I think every little helps. It's also not a bad idea to illustrate the KISS principle. I've seen people using jQuery just to set a few colours of items in CSS just because they didn't know that it could be done in a line of plain JavaScript. I love jQuery, I really do though, and when it's not being abused, it can work really well and efficiently.

Bonesnap

On the jQuery site it says it's 32kb, and if I remember correctly they're working on making it more modular and removing legacy code that supports IE 6/7/8, so it's only going to get smaller.

As for using it versus plain JavaScript, I prefer jQuery syntax to regular JavaScript syntax so I would be one of those people. shrug