How to set selected to option using ddSlick after postback?

Question

I need to use image drop-down list from http://designwithpc.com/plugins/ddslick I am trying to set "selected" option after postback, but I get infinite loop of postbacks. Here is my code:

<form id="form1">
<select id="localeId" name="localeId"></select>
</form>

<script type="text/javascript">
        //Dropdown plugin data
        var ddData = [
            {
                text: "English",
                value: "en",
                selected: false,
                description: "English",
                imageSrc: "/assets/img/flags-icons/en-flag.png"
            },
            {
                text: "Portuguese",
                value: "pt",
                selected: false,
                description: "Portuguese",
                imageSrc: "/assets/img/flags-icons/pt-flag.png"
            },
            {
                text: "Russian",
                value: "ru",
                selected: false,
                description: "Russian",
                imageSrc: "/assets/img/flags-icons/ru-flag.png"
            },
            {
                text: "Spanish",
                value: "es",
                selected: false,
                description: "Spanish",
                imageSrc: "/assets/img/flags-icons/es-flag.png"
            }
        ];

        $('#localeId').ddslick({
            data: ddData,
            defaultSelectedIndex: 3,
            onSelected: function (data) {
                if (data.selectedIndex > 0) {
                    $('#hidCflag').val(data.selectedData.value);
                    $.cookie('lang', document.getElementById("hidCflag").value, { expires: 365 });
                    form1.submit();
                }

            }
        });
    </script>

Could please help me to solve it?

Answer 1

Calling:

    $( '#demoSetSelected' ).ddslick( 'select', { index: i } );

will also trigger the "onSelected()" function you defined causing an infinite loop.

I solved the same problem by modifying the source file (jquery.ddslick.js) and adding a flag to disable the call to onSelected():

1. Change the select function to:

   methods.select = function (options) {
       return this.each(function () {
           if (options.index)
               selectIndex($(this), options.index, options.disableTrigger);
       });
   }
   

2. Modify selectIndex function definition from:

   function selectIndex(obj, index) {
   

   to:

   function selectIndex(obj, index, disableTrigger) {
   

3. At the very end of the function selectIndex(...), change from:

   if (typeof settings.onSelected == 'function') {
       settings.onSelected.call(this, pluginData);
   }
   

   to:

   if ( !disableTrigger ) {
       if (typeof settings.onSelected == 'function') {
           settings.onSelected.call(this, pluginData);
       }
   }
   

Then use instead:

    $( '#demoSetSelected' ).ddslick( 'select', { index: i, disableTrigger: true } );

As an aside: to select by value instead of index, check out the code mentioned in:

https://github.com/prashantchaudhary/ddslick/issues/78

https://github.com/lunrfarsde/ddslick

It's a fork of dd-slick with the description part removed. But added select by value.

Answer 2

You may use plugin's select method like

$('#demoSetSelected').ddslick('select', {index: i });

to select a particular index.

As per ddSlick demo#4 on their website(http://designwithpc.com/plugins/ddslick#demo)