Question

What I am trying to achieve is a second dropdown list to be populated with values based on the selection of the first dropdown list.

I’ve got it to work using the following:

http://jsfiddle.net/ydPfH/6/

The problem is that an external plug in that I am using to display images in a drop down list somehow stops this code from working properly.

The code that initalises this plug-in is $("body select").msDropDown(); and what I have below the simple search form that uses this plug-in is a jquery expandable div so you click Advanced Search to expand the form with the dynamic dropdowns.

<a href="#" rel="toggle[advancedsearch]" data-openimage="images/collapse.png" data-
closedimage="images/expand.png">Advanced Search<img id="expand" 
src="images/collapse.png"/>   </a> 
<div id="advancedsearch">
<p>Document Properties:</p>
<form>
<select id="tags" name="tags" class="tags">
etc....

What I’m hoping for is some kind of onclick or something even easier to call to another JS method to somehow remove the $("body select").msDropDown(); initialisation or to even initialise something silly that in turn removes it.

Full source of the page can be seen here if it helps: http://jsfiddle.net/pQ9LT/

Thanks,

Martin

Answer 1

If I’m getting this right, here is the answer:

You should add class attributes to the <select> elements that are going to be using your msDropDown plugin. Then initialize the plugin like this $('select.yourClass').msDropDown();
where yourClass is the class name you assigned these <select> elements.
The body part in your selector is superflous.

This way, jQuery will only apply the plugin to the <select> elements “marked” with you class name and not all of them so you can use the other “normal” <select> elements without interference.

Hope I helped you out.