CODEWITHSUNDEEP
javascriptphpjquery
Friendly Code
Friendly Code

Reputation: 1655

DDSlick 'selected' attribute ignored on <select> element

I am using the following jQuery plugin:

http://designwithpc.com/Plugins/ddSlick

To show selectable images in a dropdown select box. It is working great apart from when I try to load the html with an option already selected, this option is not selected in DDSlick (so it just shows the first option as selected).

How can I transform:

<select class="homepage_icon" name="section_thumbnail[]" id="section_thumbnail4"><option data-imagesrc="../assets/images/homepage_icons/kidjockey-thumb.jpg" value="kidjockey-thumb.jpg"></option>
<option data-imagesrc="../images/homepage_icons/horse.png" value="horse.png"></option>
<option data-imagesrc="../images/homepage_icons/rosette.jpg" value="rosette.jpg"></option>
<option data-imagesrc="../images/homepage_icons/girl.png" value="girl.png"></option>
<option data-imagesrc="../images/homepage_icons/balloon.jpg" value="balloon.jpg" selected="selected"></option>
<option data-imagesrc="../images/homepage_icons/cake.jpg" value="cake.jpg"></option>
</select>

To actually show the selected option in DDSlick?

My plugin initialization is just the simple:

if ($('.homepage_icon').length) $('.homepage_icon').ddslick();

I assumed a selected option would automatically show in DDSlick but perhaps I'm missing something?

Upvotes: 0

Views: 948

Answers (1)

Pete
Pete

Reputation: 58452

You can use the following to instantiate your drop downs:

$('.homepage_icon').each(function() {
   var selectedIndex = this.selectedIndex;
   $(this).ddslick({ defaultSelectedIndex: selectedIndex });
});

Upvotes: 1

Related Questions