JavaScript:在选择不同的下拉菜单项时,我想要更多选项来展示(JavaScript: On selection of different drop down menu items, I want more options to show)

我有一个带有不同选项的下拉菜单。 现在,在选择特定菜单项时,我想要更多选项来展示。 每个菜单项的每组选项都不同,我将如何进行此操作? 是将新选项附加到文档的正确方法吗?

I have a drop down menu with different options. Now on selection of particular menu items I'd like more options to show. Each set of options will be different for each menu item, how would I go about doing this? Is the right way to append the new options to the document?


扩展菜单是一个非常大的主题,可以通过多种方式处理。 根据你的需要,你可能最好不要自己动手推车(除非你真的知道自己在做什么,否则你需要花一点时间才能做到正确并使其完全跨浏览器) 。

这是一个非常简单的例子 ,但还有很多其他的例子。 只是google javascript扩展菜单。

另外,如果你想使用jQuery(我不是它的粉丝,但对于这类事情是完美的,只要你不打算在移动设备网站上使用它)看看这个: http ://




更优雅的方法是在xml中创建实际节点并将其显示设置为“none”,以便它们不会显示在页面上。 然后使用cloneNode制作它们的副本,并将它们附加到它们所属的任何内容中。


Expanding menues is a very large topic, which can be handled in a multitude of ways. Depending on your needs, you're probably better off pulling one off the shelf than rolling your own (unless you really know what you're doing, it will take you quite a while to get it right and make it fully cross-browser).

Here's a very simple example , but there are many many others. Just google javascript expanding menu.

Also, if you want to use jQuery (which I'm not a fan of, but is perfect for this sort of thing, as long as you don't intend to use it on mobile device sites) take a look at this:

[Edit] based on your comment...

Without knowing the specifics of what you're looking to do, I would say that if you have blocks of code that need to be appended specifically depending on someone clicking on something, and you're sure what those blocks of code are, the easiest (though not the most elegant) way to do this is to save those blocks of code as strings and append them to the innerHTML of whatever object would expect them, based on the click of the button.

You can save the blocks as an hash array and assign the value of which element you want to append to the button's onclick.

The more elegant way to do this is to create actual nodes in your xml and set their display to "none" so that they don't show up on the page. Then use cloneNode to make copies of them and appendChild them to whatever they belong.

Again, difficult to give you specifics without a specific problem, but that's two ways to approach it in general.