CODEWITHSUNDEEP
jquery
Staffan Estberg
Staffan Estberg

Reputation: 7035

jQuery: Dropkick plugin not working correctly

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.

Upvotes: 0

Views: 5356

Answers (3)

Jayendra
Jayendra

Reputation: 52799

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

Upvotes: 0

Manse
Manse

Reputation: 38147

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

Upvotes: 3

Marcelo Assis
Marcelo Assis

Reputation: 5204

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.

Upvotes: 0

Related Questions