change selected value in msdropdown

Question

I'm trying to use the msDropdown JavaScript plugin (https://github.com/marghoobsuleman/ms-Dropdown) to create html tags that include images.

It seems to work good except for if I try to change the selected value using JavaScript. Like in this jsFiddle: https://jsfiddle.net/cmu845eh/7/ I'm trying to make it so that if you call the setValue() function, it will change the selected value to a certain index.

I've tried multiple different solutions online but none work, solutions such as this:

var oHandler = $("#main").msDropDown().data("dd");
oHandler.set("length", 0);

always result in an error, and more basic jquery approaches dont work either.

Can someone help me change the value of my select tag to a certain index using javascript?

Answer 1

Using msdropdown

Let me give you a full code on how to populate select dropdown from server-side using another select dropdown.

1st Select Dropdown

<select name="" id="from" class="selectFlags" style="width:100%;">
   <option value="2" title="https://fxtop.com/ico/aon.gif">GBP</option>                                                                                                                    
   <option value="3" title="https://fxtop.com/ico/aon.gif">GBP</option>                                                                                                            
</select>

2nd Select Dropdown

<select name="" id="selectFlagTo" class="selectFlagTo form-control" style="width:100%;height:52px;">
</select>

JScript

<script language="javascript">
        $(document).ready(function(e) {
        try {
            $(".selectFlags").msDropDown({mainCSS:'dd'});
        } catch(e) {
            alert(e.message);
        }
        $(".dd").css({ 'width' : '100%' });
        });
        $(document).on("click",".dd .ddChild",function(e){
            let $from=$("#from option:selected").val();
            let $to=$("#selectFlagTo");
            $to=$to.empty();
                            
            $(".dd").css({ 'width' : '100%' });
            $(".dd2").css({ 'width' : '100%' });
            $.ajax({
                url: "http://odin.test/load_countries",
                type: "POST",
                data: {from:$from},
                success: function(response) {
                    $.each(response, function(key, entry) {
                        $to.append("<option title='https://fxtop.com/ico/aon.gif' value='"+entry.id+"'>"+entry.name+"</option>" );
                    });
                    var oDropdown = $(".selectFlagTo").msDropDown({mainCSS:'dd2'});
                    $(".dd3").css({ 'width' : '100%' });
                }
            });
        });
        </script>

Enjoy coding!!!

Answer 2

Solved it here by fixing how I was initializing the msdropdown element after the html was created. https://jsfiddle.net/uvbjhy31/