0

I'm trying to implement the awesome Dropkick jQuery plugin, but for some reason when I click on any of the buttons the lists won't expand. I just can't seem to locate what might conflict (?) with the script.

jQuery:

$('.list').dropkick();

HTML:

<select id="min-price" class="list">
    <option selected="" value="0">Min pris (€/$)</option>
    <option value="50000">50.000</option>
    <option value="75000">75.000</option>
    <option value="100000">100.000</option>
    <option value="125000">125.000</option>
    <option value="150000">150.000</option>
    <option value="175000">175.000</option>
    <option value="200000">200.000</option>
    <option value="225000">225.000</option>
    <option value="250000">250.000</option>
</select>
<select id="max-price" class="list">
    <option selected="" value="">Max pris (€/$)</option>
    <option value="50000">50.000</option>
    <option value="75000">75.000</option>
    <option value="100000">100.000</option>
    <option value="125000">125.000</option>
    <option value="150000">150.000</option>
    <option value="175000">175.000</option>
    <option value="200000">200.000</option>
    <option value="225000">225.000</option>
    <option value="">250.000+</option>
</select>
<select id="min-rooms" class="list">
    <option selected="" value="">Rum (min)</option>
    <option value="1">1 rum</option>
    <option value="2">2 rum</option>
    <option value="3">3 rum</option>
    <option value="4">4 rum</option>
    <option value="5">5 rum</option>
    <option value="6">6 rum</option>
    <option value="7">7 rum</option>
    <option value="8">8 rum</option>
    <option value="9">9 rum</option>
    <option value="10">10 rum</option>
    <option value="11">11 rum</option>
    <option value="12">12 rum</option>
    <option value="13">13 rum</option>
    <option value="14">14 rum</option>
</select>
<select id="min-yta" class="list">
    <option selected="" value="">Yta (min)</option>
    <option value="0" selected="selected">0 kvm</option>
    <option value="10">10 kvm</option>
    <option value="20">20 kvm</option>
    <option value="30">30 kvm</option>
    <option value="40">40 kvm</option>
    <option value="50">50 kvm</option>
    <option value="60">60 kvm</option>
    <option value="70">70 kvm</option>
    <option value="80">80 kvm</option>
    <option value="90">90 kvm</option>
    <option value="100">100 kvm</option>
    <option value="110">110 kvm</option>
    <option value="120">120 kvm</option>
    <option value="130">130 kvm</option>
    <option value="140">140 kvm</option>
    <option value="150">150 kvm</option>
    <option value="160">160 kvm</option>
    <option value="170">170 kvm</option>
    <option value="180">180 kvm</option>
    <option value="190">190 kvm</option>
    <option value="200">200 kvm</option>
    <option value="210">210 kvm</option>
    <option value="220">220 kvm</option>
    <option value="230">230 kvm</option>
    <option value="240">240 kvm</option>
    <option value="250">250 kvm</option>
    <option value="260">260 kvm</option>
    <option value="270">270 kvm</option>
    <option value="280">280 kvm</option>
    <option value="290">290 kvm</option>
    <option value="300">300 kvm</option>
    <option value="310">310 kvm</option>
    <option value="320">320 kvm</option>
    <option value="330">330 kvm</option>
    <option value="340">340 kvm</option>
    <option value="350">350 kvm</option>
    <option value="360">360 kvm</option>
    <option value="370">370 kvm</option>
    <option value="380">380 kvm</option>
    <option value="390">390 kvm</option>
    <option value="400">400 kvm</option>
    <option value="410">410 kvm</option>
    <option value="420">420 kvm</option>
    <option value="430">430 kvm</option>
    <option value="440">440 kvm</option>
    <option value="450">450 kvm</option>
    <option value="460">460 kvm</option>
    <option value="470">470 kvm</option>
    <option value="480">480 kvm</option>
    <option value="490">490 kvm</option>
</select>

If someone could point me in the right direction that would be greatly appreciated.

Manse
  • 37,765
  • 10
  • 83
  • 108
Staffan Estberg
  • 6,795
  • 16
  • 71
  • 107
  • What happens when the method runs ? errors ? – Manse Nov 08 '11 at 13:48
  • ManseUK: Sorry, kind of stressed out this question. I didn't get any JS errors, the only thing was the weird "jump" when I clicked the buttons. Jonathan: Thanks for editing the post, guess I should have explained my problem a bit more in detail. – Staffan Estberg Nov 08 '11 at 14:02
  • http://jsfiddle.net/NT55p/1/ should work fine with your code. – Jayendra Nov 08 '11 at 14:21
  • Anyone been able to solve width issues on Dropkick? http://stackoverflow.com/questions/11769888/how-to-individually-target-multiple-dropdowns-in-css-for-dropkick-plug-in – user1318135 Aug 02 '12 at 22:45

3 Answers3

3

If you read the documentation on the homepage of the DropKick plugin you will see the following :

The name attribute is the only one that is required.

You need to add a name attribute to your select lists

Manse
  • 37,765
  • 10
  • 83
  • 108
0

You should debug your application using some tools like Firebug and Web Developer bar and get what gone wrong into your code.

Did you checked if your JS paths are correct? Try looking into source code of your page, and accessing the src of your script tags.

Marcelo Assis
  • 5,136
  • 3
  • 33
  • 54
0

Demo with js and css added works fine.
You can try to check on the fiddle or try to put your code in fiddle.

Jayendra
  • 52,349
  • 4
  • 80
  • 90
  • nope .. should work with class and ids too. Check out the demos downloaded with the js. – Jayendra Nov 08 '11 at 14:18
  • I just had a read of the github site - never heard of the plugin before - i just assumed that was the problem - the OP accepted my answer so perhaps it resolved his problem .... – Manse Nov 08 '11 at 14:24