1

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

martincarlin87
  • 10,848
  • 24
  • 98
  • 145

2 Answers2

2

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.

thwd
  • 23,956
  • 8
  • 74
  • 108
  • Thank you very much Tom, you have no idea how grateful I am - I can imagine how difficult it was to try and follow my question to an outsider. You're a star! – martincarlin87 Mar 24 '11 at 12:42
1

I'm not completely clear on what your overall requirements are and what may or may not be acceptable so where are a few thoughts that I have.

  1. Give the select elements you do not want styled as image combo boxes a class or an id. Then use the :not() selector in combination with your msDropdown initialization

    $("body select:not('.nostyle')").msDropDown(); //using the class 'nostyle' to filter out the elements that should get the image combobox

  2. Use a more specific selector in the initialization call; this is kinda the opposite of the above

    $("body select.classOfSelectsTobeStyled").msDropDown(); //using the class 'classOfSelectsTobeStyled' on elements that should get the image combobox
no.good.at.coding
  • 20,221
  • 2
  • 60
  • 51
  • 1
    Thank you so much for your answer and for your time. I tried your answer first but it didn't seem to work for me but I have certainly learned something new, thanks, I really appreciate it. – martincarlin87 Mar 24 '11 at 12:43
  • Glad to be of help. I realized that I had an error in my script - there was a space between `select` and `.classOfSelectsTobeStyled` in the second suggestion (which is otherwise pretty much the same thing that Tom suggested before). The space changes the selector to look for descendents of `select` elements that have that class. Without the space, it's selecting descendents of `body` that are `select` tags *and* have the class `.classOfSelectsToBeStyled` – no.good.at.coding Mar 24 '11 at 12:54