I'm using ddSlick to change my drop down menus into prettier ones;

But I have a problem. I rely on programatically changing the selected item in a list, but I must do it by value rather than index. So this is the code to select the list item by index;

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

I can't seem to find any way of doing it in the documentation, thought there may be someone who has e across and solved the issue. Or if anyway knows an alternative plugin that does the same job as ddSlick?

I'm using ddSlick to change my drop down menus into prettier ones;

http://designwithpc./Plugins/ddSlick

But I have a problem. I rely on programatically changing the selected item in a list, but I must do it by value rather than index. So this is the code to select the list item by index;

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

I can't seem to find any way of doing it in the documentation, thought there may be someone who has e across and solved the issue. Or if anyway knows an alternative plugin that does the same job as ddSlick?

• javascript
• jquery

5 Answers 5

I had this issue, and the workaround was ugly - basically, I had to loop through all the items that ddslick was holding, match the value, and get the index from there. I think I got source of their demo page to help me understand examples 3 and 4. I used example 3 to help me understand how to go through all of its data, so I could loop through the items, find a matching value, and grab its index. Then example 4 let me set the dropdown item. Sorry, I can't find the files I tested with.

DdSlick looked decent, but in the end, I went with MsDropDown. I found it more robust - and it helped that it had a SetIndexByValue function. They have detailed documentation on their github site as well as on their demo site.

It's pretty simple to select ddslick dropdown programatically.

Pass selected:true in your json data you need to appear selected

var ddData = [
    {
        text: "Facebook",
        value: 1,
        selected: false,
        description: "Description with Facebook",
        imageSrc: "http://dl.dropbox./u/40036711/Images/facebook-icon-32.png"
    },
    {
        text: "Twitter",
        value: 2,
        selected: true,
        description: "Description with Twitter",
        imageSrc: "http://dl.dropbox./u/40036711/Images/twitter-icon-32.png"
    }
];

I hope you understand the point that the place where you create your json data just put the condition(something like if the id from the database matches to the id in the data you created for plugin) make selected:true else selected:false The above code will make twitter selected by default.

Hope this make sense.

I see this option in Github:

$('#myDropdown li:has(.dd-option-text:contains("MyValue"))').index();

or if text is not equal to value:

 $('#myDropdown li:has(input[value="MyValue"])').index();

ugly but works:

            var s = 0;
            var ind;
            $('#your_select .dd-option-value').each(function(i) {
                if ($(this).val() == your_value_to_test) {
                    ind = s;
                    return false;
                }
                s++;
            });

            $('#your_select').ddslick('select', {index: ind });

You can also force the selected option before formating your drop down list before calling .ddslick() just select an option in your select like this

    $("#demoSetSelected  option[value='YOURVALUE']").attr('selected', 'selected');

and then :

    $("#demoSetSelected").dsslick();